Javascript 隐藏所有没有与选定元素匹配的类的元素

我要建立一个很酷的界面

有一个水平滚动的div，其中包含图像的平铺，每个平铺下有一个单选按钮。用户将滚动并决定图像，然后单击它。单选按钮检查，jQuery在下面显示另一个水平滚动div，现在选择subcategory。。。然后，用户可以通过选择另一个平铺来进一步细化选择。这就是完整的过程

问题是，如果第二层选择中没有与第一层选择匹配的类，我不知道如何隐藏所有元素。听起来很困惑。这里是一些简化的HTML，为了节省空间，我将其发布在JSFIDLE上

总之，您将从HTML中看到需要发生什么。用户将看到类别，当他们单击类别时，与单击的父类别没有相同id的子类别将被隐藏。所有其他分区都将保持可见，以便包含的div显示

我希望我已经把这个问题解释得足够清楚了。谢谢你的帮助

---

Mike。

如果您将两个容器div命名为id为1，那么最简单的方法是将它们命名为同一事物，这样您将有两个class=cat\u id\u 1

然后是这样的：

$('#cat-container div input').on('change', function() {
    var id = $(this).parent().attr('class');
    $('#des-container div.'+id).fadeToggle();
});

在CSS中，您有display:none；在des容器中的所有DIV上。这将在单选按钮更改时侦听它，第一次更改它将调用。fadeToggle on div与第二行中的匹配类进行切换并显示它，第二次更改将再次隐藏它

这是你想要的吗

实际上，我假设您希望显示第二行中的所有项目，但在选中单选框时，您希望隐藏除与单选按钮id匹配的项目之外的所有内容？然后你可以这样做：

 $('#des-container div'+id).addClass('show');
 $('#des-container div').not('div.show').fadeToggle();

因此，基本上，您向决定显示的对象添加一个类，并隐藏没有该类的所有对象。当然，如果取消选中单选框，则需要添加一条if语句，以查看更改的单选按钮已更改为选中或未选中，如果未选中，则只需从元素中删除类show。

尝试以下代码：

$(document).ready(function() {
   $('input[type=radio][name="type"]').live('change', function() {
       var className = $(this).parent().attr("class");
       var clsID = className.split('_')[2];
       var subID = "in_cat_" + clsID;
       $("div[class*=in_cat]").hide();
       $("div." + subID).toggle("slow");
   });
});

这是JSFIDLE链接：

---

嗨，你说得对。选择的第二层已隐藏，并在更改第一层时显示。当他们选择一个类别时，当前显示所有子类别，我需要隐藏所有不匹配的类别，因此当包含div显示时，它只包含匹配的子类别。我会处理你的代码，看看我能得到什么。谢谢。哦，好的，我仍然认为你需要在显示的项目上应用一个类或其他东西，因为上面的代码不支持超过一个选中的单选按钮。是的，如果我可以在匹配的元素上应用一个类显示，那就太完美了。默认情况下，我可以将它们全部设置为“不显示”。我在制作示例JFIDLE时想到了这一点，因为您使用的是单选按钮而不是复选框，您希望一次只显示一个类别？如果是这样，嗨，我想我把我发布的代码简化了。我已经在这里发布了完整的代码，你能告诉我你的代码需要如何调整才能使用完整的未编辑代码吗：谢谢，很抱歉给你添麻烦。由于你的代码已经更改，我必须更改代码，但现在已经完成了：我已经更新了你的JSFIDLE。请检查此链接：