Question

我试图切换Bootstrap的图标时遇到了一些问题。当我运行代码时，它会在第一次点击它切换的图标时执行预期，但是当我再次单击它时它不会改变。在这里我的代码和任何帮助将不胜感激！

<a><i class="icon-plus"></i></a>

<script>
  $(".icon-minus").click(function(){
    $(this).removeClass("icon-minus").addClass("icon-plus");
  });
  $(".icon-plus").click(function(){
    $(this).removeClass("icon-plus").addClass("icon-minus");
  });
</script>

更新1：

此图标适用于可折叠菜单，其代码可以找到here：）

Answer 1

jsBin demo

$(".icon-minus, .icon-plus").click(function(){
    $(this).toggleClass("icon-minus icon-plus");
});

或者，如果您动态创建元素：

$("#parent_el_NOT_dyn_gen").on('click','.icon-minus, .icon-plus',function(){
    $(this).toggleClass("icon-minus icon-plus");
});

Answer 2

jQuery的选择器选择DOM元素，然后将click处理程序应用于它们。更改元素上的类后，它不会重新评估选择器。

您可能希望jQuery中的delegate() / on()方法动态更改单击该项时触发的处理程序。 Delegate使用事件冒泡，并将处理单击并评估单击源是否与选择器匹配（在单击时），而不是直接附加处理程序的.click()，一次（在时间页面加载或代码运行时。）

另一个解决方案是以某种方式更改处理程序，或者通过评估现有元素上的类或使用toggleClass()来检查类然后将其反转。

$(".icon-minus, .icon-plus").click(function() {
   var $this = $(this);
   if ($this.hasClass("icon-plus")) {
      $this.removeClass("icon-plus").addClass("icon-minus");
      return;
   }
   if ($this.hasClass("icon-minus")) {
      $this.removeClass("icon-minus").addClass("icon-plus");
      return;
   }
});

此方法比使用on() / delegate()略快，因为它在根处理程序处理而不是冒泡＆amp;事后检查。事件冒泡时也不容易出现任何中断。（即event.stopPropagation()）

Answer 3

简单的解决方案适用于Bootstrap 3。

$('[data-toggle="collapse"]').click(function(e) {
    $(e.target).find('.icon-minus-sign, .icon-plus-sign').toggleClass("icon-minus-sign icon-plus-sign");
});

Bootstrap - 使用jquery进行图标切换

3 个答案:

jsBin demo