【js】toggleClassを使って指定したCSSクラス名を削除と追加を切り替える

webサイトのコンセプトで時間により背景を変えたいなんて事もあるかもしれません。
今回はCSSアニメーションを使って時間が経つと色が変わる背景を作ってみたいと思います。

toggleclassを使った動きのイメージ動画

ボタンをクリックすると、「2」と「4」に指定したクラス名が削除されたり追加されたりする事で、背景色が変わります。

HTML一式

HTMLソースとなります。
「2」と「4」の背景色を変えたいので「delete」というクラス名を振っています。

<div class="container">
	<ul>
		<li class="blue">1</li>
		<li class="blue delete">2</li>
		<li class="blue">3</li>
		<li class="blue delete">4</li>
		<li class="blue">5</li>
	</ul>
	<div class="button">CLICK</div>
</div>

CSS一式

CSSソース一覧になります。
全てのCSSを入れていますが、flexやボタンなどは任意なので説明は必須部分だけにさせていただいます。

説明は後ほど。

/*---------------------------
bodyのCSS
---------------------------*/
body {
  position: relative;
  height: 100vh;
  margin: 0;
  background-color: #d0e6ec;
}

/*---------------------------
containerのCSS
---------------------------*/
.container{
  position: absolute;
	top: 50%;
	left: 50%;
  transform: translateY(-50%) translateX(-50%);
	-webkit-transform: translateY(-50%) translateX(-50%);
  text-align: center;
}

/*---------------------------
ulのCSS
---------------------------*/
ul{
  display: flex;
  margin: 0;
  padding: 0;
}

/*---------------------------
liのCSS　※必須なのはこれ！
---------------------------*/
li{
  position: relative;
  list-style: none;
  border-radius: 50%;
	width:200px;
	height:200px;
	background-color:#f79c00;
  font-size: 5em;
  font-weight: bold;
  color: #fff;
  margin-right: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 0.5s;
}

li:last-child{
  margin-right: 0;
}

.blue {
	background-color:#1688af;
}

/*---------------------------
ボタンのCSS
---------------------------*/
.button{
  display: inline-block;
  text-align: center;
  width: 150px;
  margin: 40px auto 0;
  border: 2px solid #999;
  background-color: #fff;
  padding: 10px 0;
  border-radius: 10px;
  color: #999;
  font-weight: bold;
}

.button:hover{
  cursor: pointer;
  border: 2px solid #999;
  background-color: #999;
  color: #fff;
}

js一式

jsソース一覧になります。
説明は後ほど。

$(function() {
  $(".button").click(function(){
  	$("li.delete").toggleClass("blue");
  });
});

CSSの説明

今回はクリックすると背景色が切り替わるので、必須なのはliの背景のみになります。あとはレイアウト上設定しているだけです。
本当に必須な部分を抜粋すると以下になります。

li{
	background-color:#f79c00;
}

.blue {
	background-color:#1688af;
}

デフォルトでは「.blue」がliに効いている状態。
ボタンをクリックすると「.blue」が削除され、liに設定している色（オレンジ）が表示される様にしたいので、背景色を消す前、消した後の2つを用意します。

jsの説明

※jquery動作確認（埋め込み及びCDN設置）必須です。

$(function() {
  $(".button").click(function(){
  	$("li.delete").toggleClass("blue");
  });
});

jsの動きはこれだけになります。

$(".button").click(function(){

クラス名「button」をクリックしたら

$("li.delete").toggleClass("blue");

クラス名「delete」が付いているliのクラス名「blue」があれば削除、なければ追加。

まとめ

toggleClassを使う事でスッキリした動作はもちろん、レイアウトもかなり広がります。
使う範囲も多いので汎用性は高いと思います＾＾