2

我是 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 技能为零。

谢谢

4

2 回答 2

1

您对所有<a>标签使用相同的 id。ID 在页面中必须是唯一的，
您的 javascript 仅将 on click 函数应用于第一个图像
更改 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>
于 2013-04-07T08:30:03.807 回答
1

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

然后，您可以使用each来遍历所有带有 class 的锚点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');
        })
    });
});

演示

于 2013-04-07T08:36:22.440 回答