JavaScriptで複数のクラスを取得する
さて、今回のこの記事ですがどういう時に使うのか。
こんなHTMLがあったとします。
<!DOCTYPE html>
<html lang="ja"></html>
<head>
<meta charset="utf-8" />
<title>タイトル</title>
<link href="./css/style.css" media="all" rel="stylesheet" type="text/css" />
</head>
<body>
<ul>
<li class="box box-1">Box1</li>
<li class="box box-2">Box2</li>
<li class="box box-3">Box3</li>
<li class="box box-4">Box4</li>
<li class="box box-5">Box5</li>
</ul>
<div>
<p class="box-1-detail">Hello from Box1</p>
<p class="box-2-detail">Hello from Box2</p>
<p class="box-3-detail">Hello from Box3</p>
<p class="box-4-detail">Hello from Box4</p>
<p class="box-5-detail">Hello from Box5</p>
</div>
<script charset="utf-8" src="./js/jquery.min.js"></script>
<script charset="utf-8" src="./js/main.js"></script>
</body>
例えばJS初心者AさんはBox1をクリックしたらp要素のBox1のものを表示する。みたいなことがしたいとします。
cssでレイアウトするのに、liの基本スタイルは同じなのに
box-1,box-2,box-3,box-4,box-5{
color: white;
}
みたいなのはアホらしいので
box{
color: white;
}
で、できるように全部にboxと言うクラスをつけました。
そして、問題のAさんのjsはこんな感じ
$(function(){
$(".box-1").on("click",function(){
$(".box-1-detail").show();
});
$(".box-2").on("click",function(){
$(".box-2-detail").show();
});
$(".box-3").on("click",function(){
$(".box-3-detail").show();
});
$(".box-4").on("click",function(){
$(".box-4-detail").show();
});
$(".box-5").on("click",function(){
$(".box-5-detail").show();
});
});
js初心者丸出しなコードですね。筆者自身こんなダサいコード書いた覚えがあります。
これをスマートにしていきたいと思います。
今回注目するべきはliに振られている.box-1とpに振られているbox-1-detailです。
これを使ってうまいことjsを圧縮したいと思います。
コードはこちら
$(function(){
$(".box").on("click",function(){
var class = $(this).attr("class");
var class_Array = class.split(" ");
$("."+class_Array[1]+"-detail").show();
});
});
これで全てOKです。
コードの説明をしていきます。
$(".box").on("click",function(){
これはもうおなじみのclick操作が来たらコールバック関数を呼びます。
var class = $(this).attr("class");
これですがまずclassという変数を作り、thisを使ってクリックされた要素を特定し、attrを使ってクラス名を取得します。
この時点でclassにはbox box-1などが入っています。
var class_Array = class.split(" ");
classには空白の入ったクラス名が文字列で入っているので空白で区切り、配列に入れます。
この時点でclass_Arrayには
class_Array[0] -> box
class_Array[1] -> box-1
が入っている状況です。
そして
$("."+class_Array[1]+"-detail").show();
文字列の連結を使い、. + box-1 + -detailで.box-1-detailとなり、最初と同じ挙動をするということです。
コードが間違っている場合はコメント、もしくはkonojunyaへ投げてください！