Jquery 效果仅适用于第一个 id答案

【问题标题】：Jquery effect works on only the first idJquery 效果仅适用于第一个 id
【发布时间】：2014-05-14 16:47:27
【问题描述】：

我正在尝试对具有相同标签的所有 ID 应用隐藏效果，但它仅适用于第一个。当我尝试添加 slideToggle 时，我也遇到了同样的问题，但我想解决这个问题会解决其他问题。

JQUERY

   var allPanels = $('#accordionSlide');

   allPanels.hide();

CSS

   #accordion { 
                display: block;
                width: 100%;
                overflow: hidden;
              }
   #accordionBtn { display: block; }

   #accordionSlide { display: block;}

HTML

                <div id="accordion"> 

                    <div id="accordionBtn">
                        <a href="#">Solutions</a>
                    </div>

                    <div id="accordionSlide">
                        <a href="/solutions/wireless-remote-monitoring/index.html">Wireless Remote Monitoring</a>
                    </div>

                    <div id="accordionBtn">
                         <a href="#">Solutions</a>
                     </div>

                    <div id="accordionSlide">
                        <a href="/solutions/wireless-remote-monitoring/index.html">Wireless Remote Monitoring</a>
                    </div> 

                </div>

【问题讨论】：

您不能拥有相同的ids。如果您需要多个相同的类，请将它们更改为类。
id 应该是唯一的
天哪...我知道这可能很简单，但没那么简单。谢谢大家！

标签： javascript jquery html css

【解决方案1】：

使用 class 属性，因为 id 对于每个元素都应该是唯一的。 id 只代表一个元素，这就是为什么它应该是唯一的。因此，当您应用选择器时，它只会选择它在页面上找到的第一个元素。

这样做：

 <div class="accordionSlide">
                        <a href="/solutions/wireless-remote-monitoring/index.html">Wireless Remote Monitoring</a>
                    </div>

和jquery：

 var allPanels = $('.accordionSlide');

   allPanels.hide();

【讨论】：

【解决方案2】：

jQuery 在查询 ID 时只匹配一个元素。 $("#foo").get() 将返回一个最多包含一个 Element 对象的数组。有关详细信息，请参阅 jQuery 文档。

【讨论】：

【解决方案3】：

ID Selector (“#id”)-->Selects a single element with the given id attribute.

如果您想应用于所有元素，请使用class 代替id

var allPanels = $('.accordionSlide');

allPanels.hide();

html

<div class="accordionSlide"></div>

【讨论】：