Javascript 使用class.onclick更改glyphicon

我想知道当我点击我的HTML按钮时如何改变引导图标

这是我的按钮：

<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>

{%trans'标题“%”

这是我的JavaScript部分：

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

$（文档）.ready（函数（）{
$（'.button choice'）。单击（函数（）{
$（此）.toggleClass（“字形图标V形向下”）.toggleClass（“字形图标V形向上”）；
});
});

---

我不需要点击按钮并更改里面的图标。

您的代码似乎是正确的方法。但是，您正在收听错误类上的单击事件：

$(".button-choice") 

而不是

编辑：

您还应该在按钮中找到span。还有一件事，您可以通过一个调用切换多个类

$(this).find("span").toggleClass("glyphicon-chevron-down glyphicon-chevron-up");

首先，您有一个输入错误（

.button choice

而不是

.btn choice

）

然后，您需要找到最接近的

span

并对其进行更新，否则该类将应用于

按钮而不是内部
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>

您的小提琴，已更新：
我将使用一个id来获取包含字形图标的跨度。由于id在页面中是唯一的，此解决方案仅适用于1个按钮。解决方法是使用一些
data something
调用正确的跨度

另外，您没有为按钮调用正确的类


$（文档）.ready（函数（）{
$（'.btn选项'）。单击（函数（）{
设spanId=$（this）.data（“spanId”）；
$（'#'+spanId）.toggleClass（“Glypicon V形向下Glypicon V形向上”）；
});
});

我的按钮1
我的按钮2
不是答案，但您可以这样写第三行：
$（this）.toggleClass（“Glypicon V形向下Glypicon V形向上”）。你是对的，这是我犯的错误，但是看@briosheje-answer，用你的，它不起作用；）哎呀。编辑。我还添加了一个更加枯燥的代码。谢谢你的反馈谢谢你这正是我想要的值得一提的是，使用
id
只要按钮集在整个页面中只存在一次，这种方法就会像预期的那样工作。这对我来说是隐式的，但对其他人来说确实没有必要隐式的。$（this）。find（'span'）似乎比使用id更好。出于某些原因，我不同意你@AndréDS，在这个按钮中，在任何地方都可以有许多
span
。然后他可以组合我们的两种解决方案：$（this）。find（“span#id”）；）
<!-- 
  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>

$('.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.
});