点击即可更改img src

我在论坛上搜索了一个特定的问题，但我找到的所有解决方案都不能解决我的问题。

我左边有一张图片。在右边，我有不同的话。因此，当我点击特定名称时，我希望图片更改为我在图像文件夹中的任何图片。基本上，我希望图像的来源发生变化。这是我的索引的代码：

  
  Mtl
 
  SF

这是我试过的两个jqueries公式：

 $('#mtl').click(function(){ $('#picture').attr()({ 'src':'images/short.png' }) })

和：

 $('#mtl').click(function(){ $('#picture').attr('src', 'images/short.png'); });

你的第二次尝试是正确的。这是工作的jsFiddle： http ： //jsfiddle.net/MEHhs/

所以代码应该是：

HTML：

   
  Mtl
 
  SF

JS：

 $('#mtl').click(function(){ $('#picture').attr('src', 'http://profile.ak.fbcdn.net/hprofile-ak-ash3/41811_170099283015889_1174445894_q.jpg'); });

我添加了一些在谷歌上发现的现有图像。

jsBin演示

并使用：

  Mtl
 
  SF

 $('.button').click(function(){ var idToSRC = 'images/'+ this.id +'.png'; $('#picture').attr('src', idToSRC); });

虽然以上不是用户友好的原因，但是加载新图像会有一些延迟……
更好的方法是使用单个（所谓的）精灵图像，包含所有您想要的图像，将其设置为DIV背景图像，并在点击时更改DIV的“背景位置”！

使用SPRITES演示2

将您想要的左侧位置存储到数据属性中：

 
  Mtl
 
  SF

CSS：

 #picture{ width:25px; height:25px; background:url(/images/sprite.png) no-repeat; }

检索该数据并移动packgroundPosition：

 $('.button').click(function(){ var bgpos = $(this).data('bgpos'); $('#picture').css({backgroundPosition: -bgpos+' 0'}) });

这对于第二个版本看起来都很好，请确保将DOM调用包装在文档就绪函数中，该函数可以写成……

 $(document).ready(function() { ... });

要么…

 $(function() { ... });

所以你得到……

 $(function() { $('#mtl').click(function(){ $('#picture').attr('src', 'images/short.png'); }); });

您可以在任何链接上将其用作内联函数，而不是将事件侦听器添加到每个链接类

 function changeurl(theurl){ $('.myimage').attr('src', theurl); }

第二个工作正常但你必须使用显式路径而不是相对路径：

 $('#mtl').click(function(){ $('#picture').attr('src', '/images/short.png'); });