jQueryAnimation
Googleでログイン
問題2：選択済みの要素の色を変えよう
選択された番号のブロックに色をつけよう！
あらかじめエディタに書くコード
<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¥
期待する画面
解答ソースコード
$(function () {
$("select").change(function(){
var a=$("select option:selected").val(),
b="."+a;
$(".box").find(b).css("background-color","#aaaaaa");
$(".box p").not(b).css("background-color","#dddddd");
});
});
¥JavaScript¥
解説
selectの内容が変わった時にselectの内容をvalを使って取得して、そのクラスを持つ要素をboxから見つけてそれの背景色をcssを用いて変更します。そしてnotを使って選択されているもの以外の色を元に戻します。
ログインして解答を見る
完了にする！
活動記録をTweetする
