Question

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

Alan，Ben，Cindy，Dan，Ellen，Fred。

我希望用户能够选择男性或女性。
然后我想要那些性别改变颜色或突出显示的人的名字。

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

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

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

1 个答案: