t's space.

jQueryでON/OFFの切り替えスイッチを実装する

jQueryを利用して、ボタンをクリックしたら【ONとOFF】を切り替えできるスイッチを紹介します。

12/24追記 jQueryの箇所を一部変更しました。

概要

ボタンをセレクタでオブジェクトを取得し、クリックされるとイベントが実行される。
条件分岐でクラス名が”true”の場合はOFFに、そうでない場合(”false”の場合)はONに切り替えるようにする。

ボタンの切り替えは、テキストとクラス名が変更されるようにする。

実装

HTML

<div id="change-btn" class="btn-true">ON</div>

CSS

.btn-true {
	display: flex;
	justify-content:center;
	align-items:center;
	width: 200px;
	height: 200px;
	border-radius: 50%;
	cursor: pointer;
	box-shadow: 0 5px 10px #aaa;
	background: #51A2E6;
	font-size: 2.5em;
	font-weight: bold;
	color: #fff;
}

.btn-false {
	display: flex;
	justify-content:center;
	align-items:center;
	width: 200px;
	height: 200px;
	border-radius: 50%;
	cursor: pointer;
	box-shadow: 0 5px 10px #aaa;
	background: #E65151;
	font-size: 2.5em;
	font-weight: bold;
	color: #fff;
}

jQuery

$("#change-btn").on("click",function(){
  let btnClass = $("#change-btn").attr("class");

  //ONを押したら
  if (btnClass === "btn-true") {
    //OFFに置換
    $(".btn-true").text("OFF");
    $(".btn-true").attr("class","btn-false");
  }else {
    //ONに置換
    $(".btn-false").text("ON");
    $(".btn-false").attr("class","btn-true");
  }
});

結果

See the Pen
btn
by tk96 (@tk96)
on CodePen.

自分のメモがてら作成しましたが、皆さんの参考にもなれたらなと思っています。
また、私自身プログラム自体は得意では無いため、この書き方がいいよ!等のアドバイスがあれば、コメントでご指摘頂けたら幸いです。

Comment

  1. kawa_hide より:

    ソースコードを見ると、jQueryを使うのが、text()メソッドの部分だけなのが気になりました。
    イベントには、jQueryを使わないのですか?

    • tanakey より:

      仰るとおり、jQueryがほとんど使われてなかったため只今記事を修正しました。
      ご指摘ありがとうございます。