使用jQuery循环使用相同类的对象？

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

我现在的目标是，当单击一个按钮时，通过给该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呢？

这应该是解决问题的简单方法

如果单击具有类

全屏按钮的元素

，则匹配

.program collector div.{button id}

的任何元素都将隐藏（其中

按钮id

是单击的

全屏按钮

元素的

id

属性）

请注意，

$（选择器）.hide（）自动应用
display:none
2

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

2
如果你能做一个简单的测试，那么回答你的问题就容易多了。很难知道只有JS有什么问题，而不是它使用的HTML有什么问题。请将您的HTML添加到问题中（或者更好，按照@arcyqwerty的建议创建一个提琴），非常感谢您的见解。我只是去和任何适用的代码做了个比较。当我将JSFIDLE上的jQuery替换为您的jQuery时，您的解决方案就起作用了，但游戏设计按钮除外。在这种情况下，间距会是一个问题吗？我还在控制台中收到一个无法识别的表达式错误（无法识别的表达式：。program collector div.代理电视），并且新代码无法使用该功能。这是一个很长的机会，但我想知道是否有一个足够简单的修复方法可以基于该警告找到？这是因为“游戏设计”实际上被解释为两类
Game
和
Design
。我建议使用破折号或其他分隔符。所以，是的，这是一个空白问题。无法重现您的控制台错误。你在运行不同的代码吗？我没有看到提琴中提到“电视”。是的，我实际上在一个巨大的drupal网站上工作，很多内容都来自不同php页面上呈现出来的字段集合。因此，我尽我所能重新创建了我正在制作的内容，但降价幅度比我在小提琴上看到的要大得多。不管怎样，课距问题解决了部分问题吗？
$('.fullscreen-button').click(function(){
    $('.program-collector div.' + $(this).attr('id')).hide();
});