Question

我有一些按钮，每个按钮都有一个＆＃34;全屏按钮＆＃34;，我打算使用它来显示/隐藏页面上的内容。这些按钮都有id，这些是学校课程的名称，页面上的每个按钮都有div，其中的课程与id相匹配（ID为＆＃34的按钮;编程＆＃34 ;以及一个具有＆＃34;编程＆＃34;等的类的相应div。

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

Answer 1

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

如果点击了类fullscreen-button的元素，则会隐藏与.program-collector div.{button-id}匹配的所有元素（其中button-id是所点击id的{{1}}属性} element）。

请注意，.fullscreen-button会自动应用$(selector).hide() ²

display: none

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

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

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

1 个答案: