Question

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

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

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

总而言之，您将从HTML中看到需要发生的事情。用户将看到类别，当他们点击某个类别时，将隐藏没有与所点击的父类别相同的ID的子类别。所有其他人将保持可见，准备好包含div“show”。

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

麦克

Answer 1

如果你将两个容器div命名为例如同一个东西，那么最容易，所以你会有两个类=“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-container中的所有div（对于初学者）。这将在它改变时监听单选按钮，首先更改它将在div上调用.fadeToggle（）并在第二行中匹配类并显示它，第二次更改将再次隐藏它。

这是你想要的吗？

实际上我认为你想要显示第二行中的所有项目，但是当检查一个收音机盒时你想要隐藏除了与radiobutton的id相匹配的一切之外的所有东西吗？然后你可以这样做：

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

所以基本上你要为你决定要显示的对象添加一个类，并隐藏那些没有该类的对象。当然这是另一种方式（如果你取消选中一个收音机盒），你需要添加一个if语句，看到已更改的单选按钮被更改为选中或取消选中，如果未选中，则只需删除“show”类来自元素。

Answer 2

尝试使用此代码：

$(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/

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

2 个答案: