使用 jQuery 循环遍历具有相同类的对象？答案

【问题标题】：Loop through objects with the same class with jQuery?使用 jQuery 循环遍历具有相同类的对象？
【发布时间】：2015-10-06 20:40:23
【问题描述】：

我有一些按钮，每个按钮都有一类“全屏按钮”，我打算用它们来显示/隐藏页面上的内容。这些按钮都有 id，它们是学校课程的名称，页面上的每个按钮都有与 id 匹配的类的 div（一个 id 为“programming”的按钮和一个对应的 div 类为“programming”， ETC）。

我现在的目标是拥有它，以便当单击按钮时，通过为该 div 提供样式为 display:none 的类来隐藏具有与单击按钮的 id 匹配的类的 div。

我已经写了一些我希望这样做的 jQuery，但它只适用于第一个按钮，所以我知道我在某个地方出错了。这就是我目前所拥有的......

    $('.fullscreen-button').each(function(i,elm) {
    programTitle = $(elm).attr("id");
        $(elm).click(function(){
            $('.program-collector div').each(function(j,pelm) {
                if ($(pelm).hasClass(programTitle)) {
                    $(pelm).addClass("hidden");
                }
            });
        })
    });

那么，我该如何正确地遍历所有按钮和 div？

【问题讨论】：

如果您可以创建jsfiddle，它会更容易回答您的问题。
很难知道只有 JS 有什么问题，而不能知道它工作的 HTML 有什么问题。请将您的 HTML 添加到问题中（或者更好的是，根据@arcyqwerty 的建议创建一个小提琴）

标签： jquery html loops

【解决方案1】：

这应该是您问题的简单¹解决方案。

如果单击类为fullscreen-button 的元素，则任何匹配.program-collector div.{button-id} 的元素都将被隐藏（其中button-id 是单击的id 元素的id 属性）。

注意$(selector).hide() 自动应用display: none²

$('.fullscreen-button').click(function(){
    $('.program-collector div.' + $(this).attr('id')).hide();
});

¹ 我说简单是因为它适用于大多数正常的网页。理论上，您可能有一个 id/class 名称，这会导致在 jQuery 选择器中使用时出现问题并且需要转义。

²http://api.jquery.com/hide/

【讨论】：

非常感谢您的洞察力。我刚去JSFiddle 使用任何适用的代码。当我将 JSFiddle 上的 jQuery 替换为您的时，您的解决方案有效，但 Game Design 按钮除外。在这种情况下，间距会成为问题吗？我还在控制台中收到无法识别的表达式错误（无法识别的表达式：.program-collector div.Acting For Television），并且该功能不适用于新代码。这是一个很长的镜头，但我想知道是否有一个足够简单的修复方法可以根据该警告找到？
那是因为“游戏设计”实际上被解释为两个类Game和Design。我建议使用破折号或其他分隔符。所以是的，这是一个空白问题。
无法重现您的控制台错误。你在运行一些不同的代码吗？我没有看到小提琴中提到“电视”。
是的，我实际上正在开发一个大型的 drupal 站点，其中大部分内容来自不同 php 页面的渲染字段集合。因此，我尽我所能重新创建了我正在处理的内容，但降价幅度比我在小提琴上看到的要多得多。
无论如何，类间距问题是否解决了部分问题？