29

jQuery UI ポートレットのアイコンを変更しようとしています。最小化するプラスと拡大するマイナスではなく、それらを切り替えたかったのです。

初めてマイナスをクリックするとプラスに変わりますが、プラスがマイナスに変わることはありません。これに関するヘルプは大歓迎です。

サンプル 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

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

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

したがって、最初のクリックは最初の機能になり、2 回目のクリックは 2 番目の機能になります。

于 2009-10-29T15:39:42.723 に答える
-2

Javascript をすべて実行する代わりに、ui-icon-plusthick CSS クラスを変更して、プラス イメージの代わりにマイナス イメージを表示してみませんか?

于 2009-10-29T15:44:21.107 に答える