jquery - 更改切换按钮内的图标？

Question

我有一个按钮，里面有一个图标，我有一些 jQuery 代码打开和关闭一个 div。

我有一些代码可以将图标从加号切换到减号，但问题是我必须直接单击图标才能使其工作，而不是能够单击按钮上的任何位置，这可能是减号的问题图标。

我的 HTML 如下所示：

<button class="pull-right toggleBtn span1"><i class="icon-plus"></i></button>

我的 jQuery 切换图标如下所示：

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

任何帮助都是极好的！

Answer 1

将您的 JavaScript 代码更改为：

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

您当前的代码仅侦听图标上的单击事件。此代码将侦听整个按钮上的单击事件，但仍仅更改图标上的类。

JSFiddle：http: //jsfiddle.net/jdwire/B4avV/

Answer 2

尝试这个

$(document).on('click','.toggleBtn',function(){
    $(this).children().toggleClass("icon-minus icon-plus");
});

Answer 3

尝试：

$(document).on('click','.toggleBtn',function(){
        if ($(this).children().is('.icon-plus')) {
          $(this).children().removeClass('icon-plus');
      }else{
          $(this).children().addClass('icon-plus');
      }
});