はじめに
これまでは、トグルスイッチが必要な時は、swやフラグを使って作成していましたが、toggleClass()メソッドがあることに気づきましたので、それを使ってみました。
参考サイト
jQuery toggleClass
ここにtoggleClassの仕様が書かれていますが、自分も含めて、初心者には難しすぎますので、見るだけにとどめておきます。
toggleClassとは
jqueryのメソッドで、セレクターのclass属性に属性を追加したり、外したりするするようです。例えば、class='on'のように、ボタンでクリックするたびに、'on'を付けたり、外したりできます。
//#bottunセレクターのclass属性に"on"を追加します。
//トグルするたびに、この"on"を付けたり、外したりできます。
$("#bottun").toggleClass("on");
今回作成したサンプルです。
では、これを使って、具体的に何ができるかですが、今回は、ボタンで、要素のドラックを許可したり、不許可したりするサンプルコードを示します。
//
//
$("#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.
あとがき
非常に簡単な記事ですが、ご容赦願います。簡単:メモでは、難しいことは抜きにしています。シンプルなコードと動作確認でメソッドの記述例を示しています。