Bootstrap-带有jQuery的图标切换

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：

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

Answer 1

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");
});

Answer 2

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

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

另一个解决方案是以某种方式更改处理程序，方法是评估现有元素上的类，或者使用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()快一点on()因为它是在根处理程序处处理的，之后不会冒泡并不会进行检查。 事件冒泡时也不中断。 （即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");
});