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'锚点内的锚点属性。你走得太深了一层。
我还使用'rel'变量删除了$的不必要用法。
最后，在最后加了一个分号。

另外，我建议你有一个占位符图像（在'imageBox'里面）并且只是改变它的'src'属性（而不是无缘无故地操纵DOM）。像这样：

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

Answer 2

我认为你想要的是：

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

</script>

因为您点击了<a>，$(this)是具有rel属性的元素... .find('a')正在您点击的链接中搜索子元素。

您的代码可以使用此html：

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

这显然是多余的......

希望有所帮助：）

Answer 3

#changeImage应为.changeImage

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

3 个答案: