jquery - 单击缩略图，div中的图像发生变化

Question

我正在尝试执行以下操作:

• 带有几个缩略图的行，单击时会更改主 div 中的图像

执行此操作的最佳方法是什么？

我试过这样的:

<a href="#" id="changeImage" rel="1"><img class="thumb" src="image1_thumb.jpg" /></a>
<div id="imageBox">&nbsp;</div>

和 jquery 脚本

<script type="text/javascript">
$(document).ready(function(){
    $('#changeImage').click(function(){
        var $rel = $(this).find('a').attr('rel');
        $("#imageBox").html("<img src='image" + $rel + ".jpg' />");
    })
})

</script>

但它不起作用。

感谢您的帮助!

Answer 1

尝试:

$(document).ready(function(){
    $('#changeImage').click(function(){
        var rel = $(this).attr('rel');
        $("#imageBox").html("<img src='image" + rel + ".jpg' />");
    })
});

• 您的原始代码以“changeImage” anchor 内的 anchor 属性为目标。你走得太深了一层。
• 我还删除了 $ 与“rel”变量的不必要用法。
• 最后，在最后添加了一个分号。

此外，我建议您有一个占位符图像(在“imageBox”内)并仅更改其“src”属性(而不是无缘无故地操纵 DOM)。像这样:

$("#imageBox img").attr('src', 'image' + rel + '.jpg');