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

此图标用于可折叠菜单，可以找到其代码 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");
});