在jQuery中的两个类之间切换

本文介绍了在jQuery中的两个类之间切换的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我正在尝试修改 jQuery UI portlet 的图标。而不是有一个加到最小化和一个负扩展，我想切换他们。

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.

我只有有限的成功，它第一次点击减去它翻转到一个加号，但加号从不翻转为减号。

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.

以下是一个HTML示例：

Here's a sample 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>

这是我为jQuery提出的：

Here's what I came up with for the 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 ：这是原始的javascript从jQuery UI演示网站：

---

EDIT: Here's the original javascript from the jQuery UI demo site:

<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>

我不知道他们如何能够正确切换加号和减号。 / p>

I'm not exactly sure how they were able to get the plus and minus to toggle correctly.

推荐答案

这可能是因为当你绑定这些函数时，没有结果$（。portlet-header .ui-icon-plusthick ）。它没有找到它。您可以将此绑定添加到$（。portlet-header .ui-icon-minusthick）。在添加ui-icon-plusthick类之后，click（function（）{...）。

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.

编辑：替代解决方案可以是：

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

b $ b

所以第一次点击是第一个函数，第二次点击是第二个函数。

So first click would be first function and second click would be second function.