在jQuery中的两个类之间切换 [英] Toggle between two classes in 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.

这篇关于在jQuery中的两个类之间切换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！