6

我在尝试切换 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：

此图标用于可折叠菜单，其代码可在此处找到:)

4

3 回答 3

14

jsBin 演示

$(".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");
});
于 2012-07-16T16:26:18.657 回答
1

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

您可能希望 jQuery 中的delegate()/on()方法动态更改单击项目时触发的处理程序。委托与事件冒泡一起工作，并将处理点击并评估点击源是否与选择器匹配（在点击时），而不是.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()因为它是在根处理程序中处理的，之后不会冒泡和检查。它也不易受到事件冒泡中的任何中断的影响。（即。event.stopPropagation()）

于 2012-07-16T16:26:09.817 回答
0

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

$('[data-toggle="collapse"]').click(function(e) {
    $(e.target).find('.icon-minus-sign, .icon-plus-sign').toggleClass("icon-minus-sign icon-plus-sign");
});
于 2013-10-22T19:01:59.913 回答