jquery - 单击链接时jQuery切换图像

Question

在这里需要一些帮助。我正在努力实现这一目标：

默认情况下，图像被 css display: none; 隐藏。

例如，当用户单击链接时：vanilla glazed 它将显示与图像 alt“vanilla-glazed”匹配的图像。

然后，如果用户单击另一个链接，例如：布鲁克林停电，它将隐藏活动图像并显示布鲁克林停电图像。

说得通？这是我的 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          
   });
});

见小提琴