javascript - 用 class.onclick 改变字形

Question

我想知道当我点击我的 HTML 按钮时如何更改 bootstrap 字形。

这是我的按钮:

<button class="btn btn-default btn-choice" type="button" data-toggle="collapse" data-target="#title"
                    aria-expanded="false" aria-controls="title">
              <span class="glyphicon glyphicon-chevron-down"></span> {% trans 'Title' %} </button>

这是我的 JavaScript 部分:

<script>
  $(document).ready(function () {
    $('.button-choice').click(function () {
      $(this).toggleClass("glyphicon-chevron-down").toggleClass("glyphicon-chevron-up");
    });
  });
</script>

我不习惯点击按钮并改变里面的字形。

Answer 1

首先，您输入错误(.button-choice 而不是 .btn-choice)。

然后，您需要找到最接近的 span 并更新它，否则该类将应用于 button 而不是内部 span，并且不会按预期工作。

<!-- 
  Bootstrap docs: https://getbootstrap.com/docs
-->

<button class="btn btn-default btn-choice" type="button" data-toggle="collapse" data-target="#title"
                    aria-expanded="false" aria-controls="title">
              <span class="glyphicon glyphicon-chevron-down"></span> {% trans 'Title' %} </button>

js:

$('.btn-choice').click(function () {
  $(this).find('span').toggleClass("glyphicon-chevron-down").toggleClass("glyphicon-chevron-up");
        //^----------^---- Note this! otherwise it won't work, since it would target $(this), which is the button.
});

你的 fiddle ，已更新:https://jsfiddle.net/6ae0c1dL/2/