在 jQuery 中的两个类之间切换
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1644545/
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
Toggle between two classes in jQuery
提问by CAbbott
I'm trying to modify the icons for the jQuery UI portlets. Rather than have a plus to minimize and a minus to expand, I wanted to switch them.
我正在尝试修改jQuery UI portlets的图标。与其有一个加号来最小化和一个减号来扩展，我想切换它们。
I've only had limited success with it where the first time to click the minus it flips to a plus, but the plus never flips to a minus. Any help on this would be much appreciated.
我只获得了有限的成功，第一次单击减号时它会翻转为加号，但加号永远不会翻转为减号。对此的任何帮助将不胜感激。
Here's a sample HTML:
这是一个示例 HTML：
<script src="scripts/jquery-1.3.2.js" type="text/javascript" ></script>
<script src="scripts/ui/ui.core.js" type="text/javascript"></script>
<script src="scripts/ui/ui.sortable.js" type="text/javascript"></script>
<div class="column">
<div class="portlet">
<div class="portlet-header">Links</div>
<div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
</div>
Here's what I came up with for the jQuery:
这是我为 jQuery 想到的：
<script type="text/javascript">
$(function() {
$(".column").sortable({
connectWith: '.column'
});
$(".portlet").addClass("ui-widget ui-widget-content ui-helper-clearfix ui-corner-all")
.find(".portlet-header")
.addClass("ui-widget-header ui-corner-all")
.prepend('<span class="ui-icon ui-icon-minusthick"></span>')
.prepend('<span class="ui-icon ui-icon-closethick"></span>')
.end()
.find(".portlet-content");
$(".portlet-header .ui-icon-minusthick").click(function() {
$(this).removeClass("ui-icon-minusthick");
$(this).addClass("ui-icon-plusthick");
$(this).parents(".portlet:first").find(".portlet-content").toggle();
});
$(".portlet-header .ui-icon-plusthick").click(function() {
$(this).removeClass("ui-icon-plusthick");
$(this).addClass("ui-icon-minusthick");
$(this).parents(".portlet:first").find(".portlet-content").toggle();
});
$(".portlet-header .ui-icon-closethick").click(function() {
$(this).parents(".portlet:first").toggle();
});
$(".column").disableSelection();
});
</script>
EDIT编辑：这是来自 jQuery UI 演示站点的原始 javascript：
<script type="text/javascript">
$(function() {
$(".column").sortable({
connectWith: '.column'
});
$(".portlet").addClass("ui-widget ui-widget-content ui-helper-clearfix ui-corner-all")
.find(".portlet-header")
.addClass("ui-widget-header ui-corner-all")
.prepend('<span class="ui-icon ui-icon-plusthick"></span>')
.end()
.find(".portlet-content");
$(".portlet-header .ui-icon").click(function() {
$(this).toggleClass("ui-icon-minusthick");
$(this).parents(".portlet:first").find(".portlet-content").toggle();
});
$(".column").disableSelection();
});
</script>
I'm not exactly sure how they were able to get the plus and minus to toggle correctly.
我不确定他们是如何正确切换加号和减号的。
采纳答案by Marek Tihkan
It probably because when you bind those functions there are no results for $(".portlet-header .ui-icon-plusthick"). It doesn't find it. You may add this binding to $(".portlet-header .ui-icon-minusthick").click(function() { ... after adding "ui-icon-plusthick" class.
这可能是因为当您绑定这些函数时，$(".portlet-header .ui-icon-plusthick") 没有结果。它没有找到。您可以将此绑定添加到 $(".portlet-header .ui-icon-minusthick").click(function() { ... 添加“ui-icon-plusthick”类后。
EDIT: Alternative solution could be:
编辑：替代解决方案可能是：
$(".portlet-header .ui-icon-minusthick").toggle(function() {
$(this).removeClass("ui-icon-minusthick");
$(this).addClass("ui-icon-plusthick");
$(this).parents(".portlet:first").find(".portlet-content").toggle();
}, function() {
$(this).removeClass("ui-icon-plusthick");
$(this).addClass("ui-icon-minusthick");
$(this).parents(".portlet:first").find(".portlet-content").toggle();
});
So first click would be first function and second click would be second function.
所以第一次点击将是第一个功能，第二次点击将是第二个功能。
回答by Bongs
How about
怎么样
$(YOUR_ELEMENT).live("EVENT_NAME", function() {
$(".portlet-header").toggleClass("ui-icon-plus").toggleClass("ui-icon-minus");
});
Even more shorter
更短
$(YOUR_ELEMENT).live("EVENT_NAME", function() {
$(".portlet-header").toggleClass("ui-icon-plus ui-icon-minus");
});
EDIT
编辑
As of jQuery 1.7, the .live()method is deprecated. Use .on()to attach event handlers.
Users of older versions of jQuery should use .delegate()in preference to .live().
从 jQuery 1.7 开始，该.live()方法已被弃用。使用.on()附加的事件处理程序。旧版 jQuery 的用户应.delegate()优先使用.live().
回答by George
You can try the below code
你可以试试下面的代码
$(this).toggleClass('ui-icon-plusthick ui-icon-minusthick');
回答by Richard Taylor-Kenny
I wrote this jQuery function, not a plugin, to cycle through any number of classes. Two acts like a toggle. Just put your CSV of classnames in the element's data-classes. Then cycle it with $(selector).cycleClass()
我编写了这个 jQuery 函数，而不是插件，以循环访问任意数量的类。两个行为就像一个切换。只需将您的类名 CSV 放入元素的数据类中。然后用 $(selector).cycleClass() 循环它
See it in use at www.PluginExamples.com/draggablechoose draggable-axis.
在www.PluginExamples.com/draggable 上查看它的使用情况，选择draggable-axis。
(function($){
$.fn.cycleClass = function(){
if( !$(this).data("aClasses") ){
var classes = $(this).attr("data-classes").split(",");
$(this).data("aClasses", classes);
$(this).data("classes", classes.join(" "));
$(this).data("class", classes.length);
}
$(this).data("class",($(this).data("class")+1) % $(this).data("aClasses").length);
$(this).removeClass($(this).data("classes"))
.addClass( $(this).data("aClasses")[$(this).data("class")] );
return $(this);
}
});
回答by Rahil Sondhi
Instead of doing all that Javascript, why don't you just modify the ui-icon-plusthickCSS class to show the minus image instead of the plus image?
除了做所有的 Javascript，你为什么不修改ui-icon-plusthickCSS 类来显示减号图像而不是加号图像？
