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

Hide all elements that don't have class matching selected element

本文关键字：元素 有没有 隐藏所      更新时间：2023-09-26

我有一个很酷的界面要构建。

有一个水平滚动div 包含图像的"磁贴"，每个磁贴下都有一个单选按钮。用户将滚动并决定图像，然后单击它。单选按钮检查，jQuery 在下面显示另一个 horiz 滚动div，"现在选择子类别"......然后，用户可以通过选择另一个"磁贴"来进一步细化选择。这个过程就完成了。

问题是我不确定如何隐藏第二层选择中的所有元素，如果它们没有与第一个选择匹配的类。听起来可能令人困惑。这里有一些简化的HTML，我已经把它发布在jsfiddle上以节省这里的空间。http://jsfiddle.net/RTGC3/

因此，总而言之，您将从HTML中看到需要发生的情况。用户将看到类别，当他们单击类别时，与单击的父类别没有相同ID的子类别将被隐藏。所有其他内容将保持可见，以便包含div "显示"。

我希望我已经很好地解释了这个问题。感谢您提供的任何帮助。

话筒。

尝试使用以下代码：

$(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");
   });
});

这是 JSFiddle 链接：http://jsfiddle.net/RTGC3/3/

最简单的方法是，例如，将两个 id 为 1 的容器div 命名为同一事物，因此您将有两个 class="cat_id_1"。

然后像这样：

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

在CSS中，你有display：none; 在 #des 容器中的所有div上(对于初学者(。这将在单选按钮更改时侦听它，第一次更改它将在div 上调用 .fadeToggle(( 并在第二行中匹配类并显示它，第二次更改将再次隐藏它。

这是你想要的吗？

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

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

所以基本上你向你决定显示的对象添加一个类，并隐藏所有没有该类的东西。 当然，要以另一种方式工作(如果您取消选中单选框(，您需要添加一个 if 语句，看到已更改的单选按钮已更改为选中或未选中，如果未选中，您只需从元素中删除类"show"。

相关文章：