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

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

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

更改切换按钮内的图标？

3 个答案: