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

我有一个很酷的界面来构建。隐藏所有没有与所选元素匹配的类的元素

有一个水平滚动div包含“瓷砖”的图像，每个下面的单选按钮。用户将滚动并决定图像，然后单击它。单选按钮会检查，jQuery会在下面显示另一个水平滚动div，“now select subcategory”...用户可以通过选择另一个“tile”来进一步优化选择。这是完整的过程。

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

总之，你会从HTML中看到需要发生的事情。用户将看到类别，当他们点击某个类别时，隐藏与被点击的父类别不同的子类别。所有其他人将保持可见状态，以便包含div显示。

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

Mike。

来源

2012-05-10 i-CONICA

尝试使用此代码：

$(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-10 10:06:56 Chinmaya003

嗨，我想我简化了我发布的代码。我已经在这里发布了完整的代码，你能告诉我你的代码如何调整以便在这里使用完整的未经编辑的代码：http://jsfiddle.net/CKrLX/1/谢谢，对不起。 –

由于您的代码已更改，我必须更改代码，但现在已完成：我已更新您的jsfiddle。请检查这个链接：http://jsfiddle.net/CKrLX/2/ – Chinmaya003

你真棒，非常感谢。 :) –

最简单的方法是，如果将两个容器div都命名为例如相同的东西，那么您将拥有两个class =“cat_id_1”。

然后事情liek这样的：

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

和CSS，你有显示：无;在＃des容器中的所有div（对于初学者）。当它改变时它会监听单选按钮，首先改变它会调用div上的.fadeToggle（）和第二行中匹配的类并显示它，第二次更改会再次隐藏它。

这是你想要的吗？

其实我想你想要显示第二行中的所有项目，但是在检查收音机框时，除了与单选按钮的ID相匹配的所有项目之外，还要隐藏所有项目？然后，你可以这样做：

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

所以基本上你一个类添加到您决定显示的对象，并隐藏不具有课堂上的一切。当然，如果你选择另一种方式（如果你取消选中一个收音机），你需要添加一个if语句，看看被更改的单选按钮被更改为选中或取消选中，如果未选中，只需删除类“show”从元素。

来源

2012-05-10 09:54:15 ninja

嗨，你说的没错。第二层选择已被隐藏，并在第一层的更改中显示。当他们选择一个类别时，当前显示所有子类别，我需要隐藏所有不匹配的类别，因此当包含div显示时，它只包含匹配子类别。我会处理你的代码，看看我在哪里。谢谢。 –

噢好吧，我仍然认为你需要对显示的项目应用一个类（或其他东西），导致上面的代码不会支持多于一个单选按钮检查。 – ninja

是的，如果我可以在相匹配的元素上应用“展示”类，那就完美了。我可以将它们全部设置为默认显示没有。 –

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

回答

相关问题