0

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

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

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

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

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

麦克风。

4

2 回答 2

1

最简单的方法是将 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-container 中的所有 div 上（对于初学者）。这将在单选按钮更改时侦听它，第一次更改它将在 div 上调用 .fadeToggle() 并在您的第二行中使用匹配的类并显示它，第二次更改将再次隐藏它。

这是你想要的吗？

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

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

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

于 2012-05-10T09:54:15.633 回答
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/

于 2012-05-10T10:06:56.000 回答