【问题标题】：change img src on click点击时更改 img src
【发布时间】：2012-09-28 20:19:02
【问题描述】：

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

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

<div id="picture_here">
     <img src="images/mtkili.png" id="picture"/>
</div>

<div id="about">
     <div id="mtl">Mtl</div>
</div>

<div id="about_2">
     <div id="contact">SF</div>
</div>

这是我尝试过的两个 jquery 公式：

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

和：

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

【问题讨论】：

第一次尝试不起作用，但第二次看起来不错。那个会怎么样？
是的，第二次尝试应该可以。
点击的文字如何决定应该显示什么图片？在上下文中，“更改为我的图像文件夹中的任何图像”是什么意思？
第二个效果很好。 jsfiddle.net/rhess 是否包含 jQuery？
大卫托马斯，我的文件夹中有一些照片。因此，当我点击描述（通常是一两个词）时，左侧的图片会变为我的图片文件夹中的图片。

标签： jquery image src

【解决方案1】：

jsBin demo

为所有触发器添加一个类
创建名为：mtl.png 和 contact.png 的图像

并使用：

<div>
     <div class="button" id="mtl">Mtl</div>
</div>
<div>
     <div class="button" id="contact">SF</div>
</div>

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

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

USING SPRITES demo 2

将所需的 -left 位置存储到数据属性中：

<div id="picture"></div>
<div>
     <div class="button" data-bgpos="68" id="mtl">Mtl</div>
</div>
<div>
     <div class="button" data-bgpos="100" id="contact">SF</div>
</div>

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'})
});

【讨论】：

感谢您的评论。我以前从未见过代码“数据”。这到底是怎么回事？
@MidevilChaos data 属性是一个新的有用的 HTML5 东西。阅读更多ejohn.org/blog/html-5-data-attributes

【解决方案2】：

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

所以代码应该是：

html:

<div id="picture_here">
     <img src="http://www.sbtjapan.com/img/FaceBook_img.jpg" id="picture"/>
</div>

<div id="about">
     <div id="mtl">Mtl</div>
</div>

<div id="about_2">
     <div id="contact">SF</div>
</div>

js:

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

我添加了一些在 google 上找到的现有图片。

【讨论】：

感谢您的意见！ :D 效果很好。奇怪的是，昨天我的编码与现在相同。因此，我再次尝试将我的代码与您的代码放在一起（嗯，不是在它旁边，而是在一个新文档中），两个代码都可以工作，也许我的两个初始文档以某种方式损坏了？？？

【解决方案3】：

对于第二个版本，一切看起来都不错，请确保您将 DOM 调用包装在 document ready 函数中，该函数可以写成...

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

或者……

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

所以你得到...

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

【讨论】：

谢谢斯图尔特。对于有同样问题但没有添加特定代码的任何人来说，这都是非常好的建议。好输入！ :)
谢谢，因为第二个版本看起来不错，这是我唯一能想到的，这会导致它无法意外工作（并且不会引发错误）跨度>

【解决方案4】：

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

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

【讨论】：

【解决方案5】：

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

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

https://jsfiddle.net/rabiee3/ftkuub3j/

【讨论】：