0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

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

Last updated at Posted at 2025-02-13

はじめに

これまでは、トグルスイッチが必要な時は、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.

あとがき

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

0
0
4

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?