Изменение нескольких объектов с новым именем класса с помощью 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 может быть использован для изменения класса образа на «шоу» и убедитесь, что все остальные изображения в том же DIV являются установлен в класс «скрыть»?

Answer 1

Существует метод toggle() для jquery. Но прежде чем я пойду, посмотрим, что вы можете сделать эту длинную руку следующим образом:

Прежде всего, ваши классы div не являются классами, из которых я могу сказать, а идентификаторами, поскольку они уникальны для набора. Таким образом, вы должны сделать это

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

Затем вы можете сделать это с помощью JQuery:

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

Как я уже сказал, есть, вероятно, дождевик путь с toggle(), но в основном, внешний селектор имеет обработчик OnClick , В первой строке функции указано, чтобы выбрать все изображения, находящиеся внутри внешнего div (родительский), и удалить класс «visible». Во второй строке говорится добавить класс «видимый» к изображению внутри щелкнутой ссылки.

Таким образом, вместо того, чтобы иметь «скрытый» класс и «видимый» класс, вы можете просто все изображения в пределах «множеств» деление с есть правило КАС по умолчанию:

.sets img [ 
     display: none; 
} 

и затем другое правило CSS для видимых изображений:

.sets img.visible { 
     display: block; 
} 

и поэтому вместо того, чтобы беспокоиться о переключаясь, вы просто раздеться все изображения в DIV класса (есть ли они это или нет), а затем повторно добавить его к той, которая ему нужна.