点击缩略图，div中的图片会更改

问题描述：

我尝试执行以下操作：

一行有几个缩略图，当点击时，

a row with a couple of thumbnails that, when clicked, change an image in a main 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>

但不起作用。

帮助！

答

尝试：

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

您的原始代码定位到'changeImage '锚。

最后，添加了一个分号

此外，我建议您有一个占位符图片（在'imageBox' src'属性（而不是没有理由地操作DOM）。这样的东西：

Also, I'd suggest you have a placeholder image (inside 'imageBox') and just change its 'src' attribute (instead of manipulating the DOM so much for no reason). Something like this:

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

点击缩略图，div中的图片会更改

相关推荐