問題
2
jQuery
選択済みの要素の色を変えよう
jQueryの問題に挑戦しよう！
問題
「選択済みの要素の色を変えよう」
選択された番号のブロックに色をつけよう！
あらかじめエディタに書くコード
<select name="number">
<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>
¥HTML¥
.box{
height: 100px;
display: flex;
}
p{
text-align: center;
line-height: 100px;
width: 100px;
height: inherit;
margin: 0;
background-color: #dddddd;
}
¥CSS¥
期待する画面
解答と解説（選択済みの要素の色を変えよう）
解説
LINE登録して解答を見る
※ご登録後トークルーム下部にあるメニュー内
「無料問題集※解答付き」を押すと
解答閲覧用URLが届きます
selectの内容が変わった時にselectの内容をvalを使って取得して、そのクラスを持つ要素をboxから見つけてそれの背景色をcssを用いて変更します。そしてnotを使って選択されているもの以外の色を元に戻します。
