javascript - Javascript で対応する名前を強調表示する

Question

ブラウザに表示する名前のリストがあります。

アラン、ベン、シンディ、ダン、エレン、フレッド。

ユーザーが男性または女性を選択できるようにしてほしい。
次に、その性別の人の名前を色を変えるか、強調表示してほしいです。

JavaScriptでこれを行う方法はありますか?

Answer 1

私があなたを正しく理解していれば、次のことができます：

// step 1 create list of names with classes
<ul>
  <li class="person male">Alan</li>
  <li class="person male">Ben</li>
  <li class="person female">Cindy</li>
</ul>

// step 2 create dropdown list of genders
<select id="my-dropdown-id" name="gender">
  <option value="male">Male</option>
  <option value="female">Female</option>
</select>

// step 3 simple jQuery script
<script type="text/javascript">
  $('#my-dropdown-id').change(function() {      
    $('.person').removeClass('selected');
    $('.' + this.value).addClass('selected');
  });
</script>

<style>
  .selected{
    background: yellow;
  }
</style>

これは非常に単純な解決策ですが、少なくとも理論的にはあなたのアイデアを実装していると思います。