29

我正在尝试修改jQuery UI portlets的图标。而不是有一个加号来最小化和一个减号来扩展，我想切换它们。

我只在第一次单击减号时获得了有限的成功，它会变为加号，但加号永远不会变为减号。对此的任何帮助将不胜感激。

这是一个示例 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>

我不确定他们如何能够正确切换正负。

4

5 回答 5

118

怎么样

$(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 参考

于 2011-10-25T07:36:26.337 回答
47

你可以试试下面的代码

$(this).toggleClass('ui-icon-plusthick ui-icon-minusthick');
于 2012-03-13T15:24:56.933 回答
6

这可能是因为当您绑定这些函数时，$(".portlet-header .ui-icon-plusthick") 没有结果。它没有找到它。您可以将此绑定添加到 $(".portlet-header .ui-icon-minusthick").click(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();
    });

所以第一次点击是第一个功能，第二次点击是第二个功能。

于 2009-10-29T15:39:42.723 回答
0

我编写了这个 jQuery 函数，而不是插件，用于循环访问任意数量的类。两个动作就像一个切换。只需将您的 CSV 类名放入元素的数据类中。然后用 $(selector).cycleClass() 循环它

在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);
    }
});
于 2015-10-31T04:51:53.290 回答
-2

与其做所有的 Javascript，不如直接修改ui-icon-plusthick CSS 类来显示减号图像而不是加号图像？

于 2009-10-29T15:44:21.107 回答