使用jquery更改多個對象的新類名稱

Question

我想單擊一個觸發器並顯示特定圖像。有多個觸發器可以在一個集合中顯示與其相關的特定圖像。有4套當我點擊其中一個觸發器時，我的挑戰是切換其他圖像以僅隱藏在這個「設置」中，因爲每組中只能有一個圖像顯示。

這是迄今爲止我已經把下面的HTML：

<!-- Thumbnails which can be clicked on to toggle the larger preview image --> 

<div class="materials"> 
    <a href="javascript:;" id="shirtgrey"><img src="/grey_shirt.png" height="122" width="122" /></a> 
    <a href="javascript:;" id="shirtred"><img src="red_shirt.png" height="122" width="122" /></a> 
    <a href="javascript:;" id="shirtblue"><img src="hblue_shirt.png" height="122" width="122" /></a> 
    <a href="javascript:;" id="shirtgreen"><img src="green_shirt.png" height="122" width="122" /></a> 
</div> 


<div class="collars"> 
    <a href="javascript:;" id="collargrey"><img src="grey_collar.png" height="122" width="122" /></a> 
    <a href="javascript:;" id="collarred"><img src="red_collar.png" height="122" width="122" /></a> 
    <a href="javascript:;" id="collarblue"><img src="blue_collar.png" height="122" width="122" /></a> 
    <a href="javascript:;" id="collargreen"><img src="green_collar.png" height="122" width="122" /></a> 
</div> 

<div class="cuffs"> 
    <a href="javascript:;" id="cuffgrey"><img src="grey_cuff.png" height="122" width="122" /></a> 
    <a href="javascript:;" id="cuffred"><img src="red_cuff.png" height="122" width="122" /></a> 
    <a href="javascript:;" id="cuffblue"><img src="blue_cuff.png" height="122" width="122" /></a> 
    <a href="javascript:;" id="cuffgreen"><img src="/green_cuff.png" height="122" width="122" /></a> 
</div> 

<div class="pockets"> 
    <a href="javascript:;" id="pocketgrey"><img src="grey_pocket.png" height="122" width="122" /></a> 
    <a href="javascript:;" id="pocketred"><img src=".png" height="122" width="122" /></a> 
    <a href="javascript:;" id="pocketblue"><img src="blue_pocket.png" height="122" width="122" /></a> 
    <a href="javascript:;" id="pocketgreen"><img src="green_pocket.png" height="122" width="122" /></a> 
</div> 

<!-- The larger images where one from each set should be viewable at one time, triggered by the thumb clicked above --> 

<div class="selectionimg"> 
    <div class="selectShirt"> 
     <img src="grey_shirt.png" height="250" width="250" class="selectShirtGrey show" />   
     <img src="red_shirt.png" height="250" width="250" class="selectShirtRed hide" />   
     <img src="blue_shirt.png" height="250" width="250" class="selectShirtBlue hide" />   
     <img src="green_shirt.png" height="250" width="250" class="selectShirtGreen hide" /> 
    </div> 

    <div class="selectCollar"> 
     <img src="grey_collar.png" height="250" width="250" class="selectCollarGrey show" />   
     <img src="red_collar.png" height="250" width="250" class="selectCollarRed hide" />   
     <img src="blue_collar.png" height="250" width="250" class="selectCollarBlue hide" />   
     <img src="green_collar.png" height="250" width="250" class="selectCollarGreen hide" />  
    </div> 

    <div class="selectCuff"> 
     <img src="grey_cuff.png" height="250" width="250" class="selectCuffGrey show" />   
     <img src="red_cuff.png" height="250" width="250" class="selectCuffRed hide" />   
     <img src="blue_cuff.png" height="250" width="250" class="selectCuffBlue hide" />   
     <img src="green_cuff.png" height="250" width="250" class="selectCuffGreen hide" /> 
    </div> 

    <div class="selectPocket"> 
     <img src="grey_pocket.png" height="250" width="250" class="selectPocketGrey show" />   
     <img src="hred_pocket.png" height="250" width="250" class="selectPocketRed hide" />   
     <img src="blue_pocket.png" height="250" width="250" class="selectPocketBlue hide" />   
     <img src="green_pocket.png" height="250" width="250" class="selectPocketGreen hide" /> 
     </div>  
</div> 

的jQuery如何可以用來改變圖像的一類「秀」，並確保在同一格的所有其他圖像設置爲「隱藏」類？

Answer 1

有一個用於jquery的toggle()方法。但在我去看之前，你可以這樣做這樣一個長手：

首先，你的div類不是我能說的類，而是id，因爲它們對於這個集合是唯一的。所以你應該讓

<div id="cuffs" class="set"> 

然後，你可以用jQuery做到這一點：

$(".set a").click(function() { 
    $(this).parent("img").removeClass("visible"); 
    $("img",this).addClass("visible"); 
}); 

就像我說的，有可能是與toggle()的巧妙方式，但基本上，外選擇有onclick處理程序。該函數的第一行表示選擇位於外部div（父級）內部的所有圖像並刪除「可見」類。第二行說要將「可見」類添加到點擊鏈接內部的圖像中。

這樣的，而不是一個「隱藏」類和「看得見的」類，你可以有內部的「套」的所有圖像DIV有一個默認的CSS規則：

.sets img [ 
     display: none; 
} 

，然後有對於可見光圖像另一個CSS規則：

.sets img.visible { 
     display: block; 
} 

因此而不必擔心觸發的，你只是去除所有的圖像在類的DIV（無論他們是否有和無的），然後重新添加它到需要它的人。