jquery - jQuery - 显示/隐藏具有相同 id 的多个 div

Question

我最近在 stackoverflow 上找到了我的一个问题的答案，其中涉及根据下拉列表的值显示和隐藏 div，这里是演示 - http://jsfiddle.net/pXdS6/16/

我的新问题是，如果我想根据值显示具有相同 id 的多个 div 怎么办？

像这样的html：

<div id="divarea1" class="box">DIV Area 1</div>
<div id="divarea2" class="box">DIV Area 2</div>
<div id="divarea3" class="box">DIV Area 3</div>
<div id="divarea3" class="box">DIV Area 3</div>

如果我从下拉列表中选择“DIV 区域 3”，我希望显示带有 #divarea3 的两个 div

Answer 1

您不能也不应该有多个具有相同 id 的 DOM 元素。使用类。如果必须，使用数百个类（不是真的）对它们进行分组。一旦你的课程开始工作，

<div id="divarea1" class="box set1">DIV Area 1</div>
<div id="divarea2" class="box set1">DIV Area 2</div>
<div id="divarea3" class="box set2">DIV Area 3</div>
<div id="divarea4" class="box set2">DIV Area 3</div>

$('.set2').show();

这应该可以实现您想要实现的目标。

Answer 2

ID 属性在页面上应该是唯一的。如果您对显示“divarea3”项目感兴趣，您可以为每个元素添加另一个类，然后根据该类显示它们。