點擊鏈接時jQuery切換圖片

Question

需要一些幫助。我試圖做到這一點：

默認情況下，圖像被CSS隱藏顯示：無;

當用戶點擊鏈接例如：香草玻璃它會顯示與圖像alt「香草釉」相匹配的圖像。

然後，如果用戶點擊另一個鏈接，例如：brookyln blackout它將隱藏活動圖像並顯示brookyln blackout圖像。

有意義嗎？這是我的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