隱藏所有沒有匹配所選元素的類的元素

Question

我有一個很酷的界面來構建。

有一個水平滾動div包含圖像的“圖塊”，每個下面都有一個單選按鈕。 用戶將滾動並決定圖像，然后單擊它。 單選按鈕檢查，jQuery顯示下面的另一個horiz滾動div，“現在選擇子類別”...然后用戶可以通過選擇另一個“tile”進一步細化選擇。 這是完成的過程。

問題是如果他們沒有與第一個選擇匹配的類，我不確定如何隱藏第二層選擇中的所有元素。 聽起來很困惑。 這是一些簡化的HTML，我已經將它發布在jsfiddle上以節省空間。 http://jsfiddle.net/RTGC3/

總而言之，您將從HTML中看到需要發生的事情。 用戶將看到類別，當他們點擊某個類別時，將隱藏沒有與所點擊的父類別相同的ID的子類別。 所有其他人將保持可見，准備好包含div“顯示”。

我希望我已經很好地解釋了這個問題。 感謝您提供的任何幫助。

麥克風。

Answer 1

如果你將兩個容器div命名為例如同一個東西，那么最容易，所以你會得到TWO 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（）並在第二行中匹配類並顯示它，第二次更改將再次隱藏它。

這是你想要的嗎？

實際上我覺得你想要顯示第二行中的所有項目，但是在檢查一個收音機盒時你想要隱藏除了與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/