簡単メモ：シンプルなトグルスイッチの実装

はじめに

これまでは、トグルスイッチが必要な時は、swやフラグを使って作成していましたが、toggleClass()メソッドがあることに気づきましたので、それを使ってみました。

参考サイト

jQuery toggleClass
ここにtoggleClassの仕様が書かれていますが、自分も含めて、初心者には難しすぎますので、見るだけにとどめておきます。

toggleClassとは

jqueryのメソッドで、セレクターのclass属性に属性を追加したり、外したりするするようです。例えば、class='on'のように、ボタンでクリックするたびに、'on'を付けたり、外したりできます。

javascript sample.js

//#bottunセレクターのclass属性に"on"を追加します。
//トグルするたびに、この"on"を付けたり、外したりできます。
$("#bottun").toggleClass("on");

今回作成したサンプルです。

では、これを使って、具体的に何ができるかですが、今回は、ボタンで、要素のドラックを許可したり、不許可したりするサンプルコードを示します。

javascript sample.js

//
//
    $("#drag_stop").on('click', function() {
            //
            $(this).toggleClass("on");
            if($(".on").length!==0){
                         $(this).html("ドラッグ許可状態");
                         //
                         $("#list_blk").draggable('enable');
                         $("#pop_comment").draggable('enable');
                         alertX("ドラッグ許可にしました。",5000);
                        
            }else{
                         $(this).html("ドラッグ禁止状態");
                         //
                         $("#list_blk").draggable('disable');
                         $("#pop_comment").draggable('disable');
                         alertX("ドラッグ禁止にしました。",5000);
            }
    });

テストサイトです。

アメバ再生リスト
ページの右端に「ドラグ許可状態」というボタンがあります。このボタンをクリックんするたびにトグルして、リスト要素とコメント要素がドラッグしたり、できなかったりします。

ここでデモします。

トグルだけの確認ができます。ドラッグ要素はコメントにしています。

See the Pen Untitled by なつかしの曲ポータル (@okpzwnyh-the-vuer) on CodePen.

あとがき

非常に簡単な記事ですが、ご容赦願います。簡単：メモでは、難しいことは抜きにしています。シンプルなコードと動作確認でメソッドの記述例を示しています。