这里需要一些帮助。我正在努力实现这一目标:
默认情况下,图像被 css display: none 隐藏;
例如,当用户单击链接时:vanilla glazed 它将显示与图像 alt“vanilla-glazed”相匹配的图像。
然后,如果用户单击另一个链接,例如: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>
最佳答案
你可以这样试试
$(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
关于单击链接时 jQuery 切换图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15234209/