单击更改图标（切换）答案

【问题标题】：Change icon on click (toggle)单击更改图标（切换）
【发布时间】：2013-03-11 18:23:41
【问题描述】：

我在 jquery 中有一个简单的脚本，用于在单击 <p> 时切换 div（显示和隐藏）（我正在使用引导程序）。

HTML：

<p id="click_advance"><i class="icon-circle-arrow-down"></i> Advanced search</p>
<div id="display_advance">
    <p>This is the advance search</p>
</div>

JS：

$('#click_advance').click(function(){
$('#display_advance').toggle('1000');
$(this).html('<i class="icon-circle-arrow-up"></i> Advanced search');

});

所以，当我第一次单击时，图标从下变为上，但很明显，当我再次单击“click_advance”时，图标并没有变回来。所以我想要像显示和隐藏这样的切换效果；但我对如何使用图标一无所知。

【问题讨论】：

标签： jquery twitter-bootstrap

【解决方案1】：

不用每次都覆盖html，只需切换类即可。

$('#click_advance').click(function() {
    $('#display_advance').toggle('1000');
    $("i", this).toggleClass("icon-circle-arrow-up icon-circle-arrow-down");
});

【讨论】：

纯粹，干净，超级简单，很棒！

【解决方案2】：

如果您的图标基于块中的文本（连字）而不是块的类，那么以下将起作用。此示例使用 Google Material Icons 的“+”和“-”图标作为 MaterializeCSS 的一部分。

<a class="btn-class"><i class="material-icons">add</i></a>

$('.btn-class').on('click',function(){
    if ($(this).find('i').text() == 'add'){
        $(this).find('i').text('remove');
    } else {
        $(this).find('i').text('add');
    }
});

编辑：添加了缺失的); 以使其正常运行。

它也适用于 JQuery post 1.9，其中不推荐使用函数切换。

【讨论】：

对我来说很棒！当图标嵌套到其他 div 中时也可以使用。

【解决方案3】：

试试这个：

$('#click_advance').click(function(){
  $('#display_advance').toggle('1000');
  icon = $(this).find("i");
  icon.hasClass("icon-circle-arrow-down"){
    icon.addClass("icon-circle-arrow-up").removeClass("icon-circle-arrow-down");
  }else{
    icon.addClass("icon-circle-arrow-down").removeClass("icon-circle-arrow-up");
  }
})

甚至更好，正如凯文所说：

$('#click_advance').click(function(){
  $('#display_advance').toggle('1000');
  icon = $(this).find("i");
  icon.toggleClass("icon-circle-arrow-up icon-circle-arrow-down")
})

【讨论】：

【解决方案4】：

如果 .toggle 不起作用，我会做下一个：

var flag = false;
$('#click_advance').click(function(){
    if( flag == false){
       $('#display_advance').show('1000');
         // Add more code
       flag = true;
    }
    else{
       $('#display_advance').hide('1000');
       // Add more code
       flag = false;
    }
}

代码有点多，但可以工作

【讨论】：

【解决方案5】：

这是一个非常简单的方法

 $(function () {
    $(".glyphicon").unbind('click');
    $(".glyphicon").click(function (e) {
        $(this).toggleClass("glyphicon glyphicon-chevron-up glyphicon glyphicon-chevron-down");
});

希望这会有所帮助：D

【讨论】：

只是一个小修复：添加 });在末尾。谢谢Yj的解决方案

【解决方案6】：

$("#togglebutton").click(function () {
  $(".fa-arrow-circle-left").toggleClass("fa-arrow-circle-right");
}

我有一个 ID 为“togglebutton”的按钮和一个来自 FontAwesome 的图标。这可以是一种切换它的方法。从左箭头到右箭头图标

【讨论】：