点击缩略图，div中的图片会更改 [英] Click on a thumbnail, an image in a div changes

问题描述

我尝试执行以下操作：

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

• 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中的图片会更改的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！