javascript - 使用 Javascript 突出显示相应的名称

Question

我有一个要在浏览器中显示的名称列表：

艾伦、本、辛迪、丹、艾伦、弗雷德。

我希望用户能够选择male或female。
然后，我希望具有该性别的人的姓名可以更改颜色或突出显示。

有没有办法用 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>

这是一个非常简单的解决方案，尽管我相信它至少在理论上实现了您的想法。