ログイン

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

jQueryAnimationの問題

jQueryAnimation

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

問題

選択された番号のブロックに色をつけよう!

自分の環境に書くコード

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