ログイン
問題2

選択済みの要素の色を変えよう

アイコン画像

問題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を使って選択されているもの以外の色を元に戻します。
ログインして解答を見る
完了にする!
twitterのアイコン
活動記録をTweetする
LINEの友達追加でお役立ち動画をGET!!
LINEの友達追加でお役立ち動画をGET!!

閉じる