jquery - 单击选项卡时如何更改图标？

Question

我在某些选项卡上遇到了一个小问题，我正在尝试将图标更改为减号图标(当在其上时)和加号图标(不在其上时)(如果这是有意义的)。

当您单击它时，它会更改为减号按钮，但当您单击另一个选项卡时，它不会变回来。

$('ul.nav-tabs li').click(function(){
    $(this).find('i.tabIcon').removeClass('fa-plus').addClass('fa-minus');
    $('ul.nav-tabs li:not(active)').removeClass('fa-plus').addClass('fa-minus');
});

任何帮助将不胜感激。

Answer 1

一种方法是删除所有图标上的减号，将其替换为 + 符号，然后仅将减号添加到具有 li 的图标被点击:

//Store as variable outside the function so we don't have to keep looking them up each
// time any of the li is clicked.
var $tabIcons = $('ul.nav-tabs li i.tabIcon');
$('ul.nav-tabs li').click(function(){

    //remove - from all icons, add +.
    $tabIcons.removeClass('fa-minus').addClass('fa-plus');

    //remove + from this tab icon, add -.
    $(this).find('i.tabIcon').removeClass('fa-plus').addClass('fa-minus');
});