jQueryの2つのクラスを切り替える

StackOverflow https://stackoverflow.com/questions/1644545

  •  10-07-2019
  •  | 
  •  

質問

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>

正と負を正しく切り替えるために、どのようにプラスとマイナスを取得できたかは正確にはわかりません。

役に立ちましたか？

解決

おそらく、これらの関数をバインドすると、$（＆quot; .portlet-header .ui-icon-plusthick＆quot;）の結果がないためです。それが見つかりません。このバインディングを$（＆quot; .portlet-header .ui-icon-minusthick＆quot;）。click（function（）{...＆quot; ui-icon-plusthick＆quot;クラスを追加した後に追加できます。

編集： 代替ソリューションは次のとおりです。

$(".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番目の機能です。

他のヒント

方法について

$(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の古いバージョンのユーザーは、 .live（）よりも .delegate（）を優先して使用する必要があります。

jQuery APIリファレンス

以下のコードを試すことができます

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

任意の数のクラスを循環するために、プラグインではなく、このjQuery関数を作成しました。 2つの機能はトグルのように機能します。クラス名の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);
    }
});

すべてのJavascriptを実行する代わりに、 ui-icon-plusthick CSSクラスを変更して、プラス画像ではなくマイナス画像を表示してみませんか？

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top