在jQuery中的两个类之间切换

Question

我正在尝试修改jQuery UI portlet的图标.我想切换它们,而不是加减少和减去扩展.

我只是取得了有限的成功,第一次点击减去它翻转加号,但加号从未翻转到减号.任何有关这方面的帮助将非常感激.

这是一个示例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提出的:

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

---

编辑:这是来自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>

我不确定他们如何才能正确切换加号和减号.

Answer 1

怎么样

$(YOUR_ELEMENT).live("EVENT_NAME", function() {
    $(".portlet-header").toggleClass("ui-icon-plus").toggleClass("ui-icon-minus");
});

更短

$(YOUR_ELEMENT).live("EVENT_NAME", function() {
    $(".portlet-header").toggleClass("ui-icon-plus ui-icon-minus");
});

编辑

从jQuery 1.7开始,该.live()方法已被弃用.使用.on()附加的事件处理程序.旧版jQuery的用户应该.delegate()优先使用.live().

jQuery API参考

Answer 2

您可以尝试以下代码

$(this).toggleClass('ui-icon-plusthick ui-icon-minusthick');

Answer 3

这可能是因为绑定这些函数时没有$(".portlet-header .ui-icon-plusthick")的结果.它找不到它.您可以将此绑定添加到$(".portlet-header .ui-icon-minusthick").单击(function(){...添加"ui-icon-plusthick"类之后.

编辑:替代解决方案可能是:

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

因此,第一次单击将是第一个功能,第二次单击将是第二个功能.