jQuery переключения изображений при нажатии ссылки

Question

Нужна помощь здесь. Я пытаюсь достичь этого:

По умолчанию изображения скрыты css display: none;

Когда пользователь нажимает на ссылку, например: ванильное стекло, будет отображаться изображение, соответствующее изображению alt «ванильное глазурование».

Тогда, если пользователь нажимает на другую ссылку, например: brookyln затемнение, это скроет активное изображение и покажет изображение отключения черного цвета.

Имеет смысл? Вот моя разметка html.

Мне нужна помощь с частью jQuery. Не уверен, где начать.

<div id="nameWrapper"> 

<ul> 

<li><a href="#" class="vanilla-glazed">vanilla glazed</a></li> 
<li><a href="#" class="brookyln-blackout">brookyln blackout</a></li> 

</ul> 

</div> 


<div class="gallery"> 

<div class="image-wrapper"> 

<img src="#" alt="brookyln-blackout" /> 

    <div class="meta"> 
    <p>description</p> 
    </div> 

</div> 

<div class="image-wrapper"> 

<img src="#" alt="vanilla-glazed" /> 

    <div class="meta"> 
    <p>description</p> 
    </div> 

</div> 

</div> 

Answer 1

Вы можете попробовать что-то вроде этого

$(document).ready(function(){ //on load of the document 
    $("#nameWrapper a").click(function(){ //on a click on a a in your div 
     $('.image-wrapper img').hide(); //hide all images (including already hidden ones 
     $("img[alt='"+$(this).attr('class')+"']").show(); //show the image with alt value   
    }); 
}); 

см fiddle