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

我是jquery和javascript的新手。我想要一个div中的图片改变点击另一张图片。我在这里环顾四周，发现了类似于我想要的东西，但似乎无法使其工作。在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你用相同的ID为所有<a>标签

来源

2013-04-07 Thierry Martens

Thx stratton＆user 1479606;现在它就像一个魅力:) – 2013-04-07 09:51:39

。一个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>

来源

2013-04-07 08:30:03 clem

不知道为什么，但它似乎并没有工作：我的代码有什么问题吗？ – 2013-04-07 09:08:25

该代码将图像的源属性更改为image1.jpg，image2.jpg等这些图像是否存在？ – clem 2013-04-07 09:15:07

是的，他们存在:(如果不是，我应该得到一个红十字没有？我使用IE 9可以这样的问题？ – 2013-04-07 09:24:09

更改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

来源

2013-04-07 08:36:22 Eli

不知道为什么，但它似乎并没有工作：我的代码有什么问题吗？ – 2013-04-07 09:08:49

@ThierryMartens请检查我的编辑 – Eli 2013-04-07 09:15:50

这是否真的会改变以前的状况？ – clem 2013-04-07 09:17:04

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

回答

相关问题