jQuery 单击时更改图标（切换）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15345784/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Change icon on click (toggle)
提问by fedejp
I have a simple script in jquery to toggle a div (show and hide) when a <p>is clicked (I'm using bootstrap).
我在 jquery 中有一个简单的脚本，用于在<p>单击a 时切换 div（显示和隐藏）（我正在使用引导程序）。
HTML:
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:
JS：
$('#click_advance').click(function(){
$('#display_advance').toggle('1000');
$(this).html('<i class="icon-circle-arrow-up"></i> Advanced search');
});
});
So, when I click for the first time the icon changes from down to up but obviously when I click "click_advance" again the icon doesn't change back. So I want the toggle effect like the show and hide; but I'm cluless on how to do it with an icon.
因此，当我第一次单击时，图标会从下变为上，但很明显，当我再次单击“click_advance”时，图标不会变回来。所以我想要像显示和隐藏一样的切换效果；但我对如何使用图标一无所知。
回答by Kevin B
Instead of overwriting the html every time, just toggle the class.
无需每次都覆盖 html，只需切换类即可。
$('#click_advance').click(function() {
$('#display_advance').toggle('1000');
$("i", this).toggleClass("icon-circle-arrow-up icon-circle-arrow-down");
});
回答by Edward Moffett
If your icon is based on the text in the block (ligatures) rather the class of the block then the following will work. This example uses the Google Material Icons '+' and '-' icons as part of MaterializeCSS.
如果您的图标基于块中的文本（连字）而不是块的类，则以下内容将起作用。此示例使用 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');
}
});
Edit:Added missing );needed for this to function properly.
编辑：添加);了此功能正常运行所需的缺失。
It also works for JQuery post 1.9 where toggling of functions was deprecated.
它也适用于 JQuery post 1.9，其中不推荐使用函数切换。
回答by monxas
Try this:
尝试这个：
$('#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");
}
})
or even better, as Kevin said:
甚至更好，正如凯文所说：
$('#click_advance').click(function(){
$('#display_advance').toggle('1000');
icon = $(this).find("i");
icon.toggleClass("icon-circle-arrow-up icon-circle-arrow-down")
})
回答by Mollo
If .toggle is not working I would do the next:
如果 .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;
}
}
It's a little bit more code, but it works
这是更多的代码，但它的工作原理
回答by Tj Laubscher
Here is a very easy way of doing that
这是一个非常简单的方法
$(function () {
$(".glyphicon").unbind('click');
$(".glyphicon").click(function (e) {
$(this).toggleClass("glyphicon glyphicon-chevron-up glyphicon glyphicon-chevron-down");
});
Hope this helps :D
希望这会有所帮助：D
回答by Manish N
$("#togglebutton").click(function () {
$(".fa-arrow-circle-left").toggleClass("fa-arrow-circle-right");
}
I have a button with the id "togglebutton" and an icon from FontAwesome . This can be a way to toggle it . from left arrow to right arrow icon
我有一个 ID 为“togglebutton”的按钮和一个来自 FontAwesome 的图标。这可以是一种切换它的方式。从左箭头到右箭头图标
