Question

我是jquery和javascript的新手。我希望div中的某些图片可以在点击另一张图片时更改。我确实环顾四周，找到了类似于我想要的东西，但似乎无法使它发挥作用。

这是我的代码：

<HTML>
<HEAD>
<TITLE></TITLE>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js">

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

</HEAD>
<BODY>
<div id="imageBox"><img src=placeholder.jpg></div>
<BR>
<a href="#" id="changeImage" rel="1"><img class="thumb" src="image1-thumb.jpg" /></a>
<a href="#" id="changeImage" rel="2"><img class="thumb" src="image2-thumb.jpg" /></a>
<a href="#" id="changeImage" rel="3"><img class="thumb" src="image3-thumb.jpg" /></a>
</BODY>
</HTML>

你可以在这里看到生活：http://www.thebruises.be/TEST/test.html

但正如我上面所说，它不起作用;试图在体内移动...但不会改变任何东西。

任何帮助都会受到赞赏......正如我上面提到的，我有零javascript / jquery技能。

THX

Answer 1

您对所有<a>代码使用相同的ID。页面中的ID必须是唯一的。您的javascript仅将点击功能应用于第一个图像将ID更改为类，您的代码应该正常工作

您的代码应如下所示：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $('.changeImage').click(function(){
        var rel = $(this).attr('rel');
        $("#imageBox img").attr('src', 'image' + rel + '.jpg');
    })
});
</script>

...

<a href="#" class="changeImage" rel="1"><img class="thumb" src="image1-thumb.jpg" /></a>
<a href="#" class="changeImage" rel="2"><img class="thumb" src="image2-thumb.jpg" /></a>
<a href="#" class="changeImage" rel="3"><img class="thumb" src="image3-thumb.jpg" /></a>

Answer 2

将您的id="changeImage"更改为class="changeImage"，因为ID是唯一的。

然后，您可以使用each使用类changeImage迭代所有锚点：

$('.changeImage').each(function() {
    $(this).click(function(){
        var rel = $(this).attr('rel');
        $("#imageBox img").attr('src', 'image' + rel + '.jpg');
    })
});

将其复制并粘贴到您的jQuery代码中：

$(document).ready(function(){
    $('.changeImage').each(function() {
        $(this).click(function(){
            var rel = $(this).attr('rel');
            $("#imageBox img").attr('src', 'image' + rel + '-thumb.jpg');
        })
    });
});

Demo

在div中显示图像点击不起作用

2 个答案: