javascript - 隐藏所有不具有与所选元素匹配的类的元素

Question

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

有一个水平滚动的 div，其中包含图像“图 block ”，每个图 block 下方都有一个单选按钮。用户将滚动并选择图像，然后单击它。单选按钮选中，jQuery 在下方显示另一个水平滚动的 div，“现在选择子类别”...然后用户可以通过选择另一个“tile”进一步细化选择。过程到此结束。

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

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

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

迈克。

Answer 1

试试这个代码:

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