JQuery を使った changeイベント + value の取得 + 特定の要素にCSS
See the Pen
by ぼぶ@朝活input中 (@bobu_6326)
on CodePen.
HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk="
crossorigin="anonymous"></script>
</head>
<body>
<select name="number">
<option selected>選択してください</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<div class="box">
<p class="1">1</p>
<p class="2">2</p>
<p class="3">3</p>
<p class="4">4</p>
</div>
</body>
</html>
CSS
.box{
height: 100px;
display: flex;
}
p{
text-align: center;
line-height: 100px;
width: 100px;
height: inherit;
margin: 0;
background-color: #ddd;
}JQuery
$(function(){
$("select").on("change",function(){
let value = "."+ $(this).val();
$(".box").find(value).css("background-color","#eee");
$(".box p").not(value).css("background-color","#ddd");
})
});解説
HTML
select に option を5つ設定。一つは初期状態の選択肢と4つの value
JQuery
- $(“select”).on(“change”,function(){ }) = select タグに変化があった時にイベントを発生させる
- let value = let で関数を作る宣言 「value」 という関数を作る
- = “.”+$(this).val() = $(this) で変化した select を指定して、.val() で value の値を取得。class名として使うので頭に “.” を追加する
- $(“.box).find(value).css(“background-color”,”#eee”); = .box の中で value関数 と同じクラス名の要素を探して、background-color: #eee を付与する
- $(“.box p”).not(value).css(“background-color”,”#ddd”); = 今度は .box の中の p に value関数 と[異なる]クラス名に css を付与する。この一行がないと他の選択肢を選んだ時に色が戻らない
