jQuery 单击更改 img src
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12784144/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
change img src on click
提问by Midevil Chaos
I have searched the forum for one particular issue, yet all the solutions I found do not work for my problem.
我在论坛上搜索了一个特定问题，但我找到的所有解决方案都不适用于我的问题。
I have an image on the left hand side. On the right hand side, I have different words. So, When I click on a particular name, I want the picture to change to whatever picture I have in my image folder. Basically, I want the source of the image to change. Here is the code for my index:
我在左侧有一个图像。在右手边，我有不同的话。因此，当我单击特定名称时，我希望图片更改为我的图片文件夹中的任何图片。基本上，我希望图像的来源发生变化。这是我的索引的代码：
<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>
and here are two jqueries formulas I tried:
这是我尝试过的两个 jquery 公式：
$('#mtl').click(function(){
$('#picture').attr()({
'src':'images/short.png'
})
})
and:
和：
$('#mtl').click(function(){
$('#picture').attr('src', 'images/short.png');
});
回答by gabitzish
Your second attempt is correct. Here is the working jsFiddle: http://jsfiddle.net/MEHhs/
你的第二次尝试是正确的。这是工作的 jsFiddle：http: //jsfiddle.net/MEHhs/
So the code should be:
所以代码应该是：
html:
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:
js：
$('#mtl').click(function(){
$('#picture').attr('src', 'http://profile.ak.fbcdn.net/hprofile-ak-ash3/41811_170099283015889_1174445894_q.jpg');
});
I've added some existing images found on google.
我添加了一些在谷歌上找到的现有图片。
回答by Roko C. Buljan
- Add a class to all your triggers
- create images called:
mtl.pngandcontact.png
- 为所有触发器添加一个类
- 创建名为：
mtl.png和contact.png
and use:
并使用：
<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);
});
While the above will not be user friendly cause there's some latency in loading new images...
A better approachwould be to use a single (so-called) spriteimage, containing all your desired images, set it as a DIV background image and changing that DIV's "background-position" on click!
虽然上述内容不是用户友好的，因为加载新图像有一些延迟......
更好的方法是使用单个（所谓的）精灵图像，包含所有所需的图像，将其设置为 DIV 背景图像和单击时更改该 DIV 的“背景位置”！
USING SPRITES demo 2
使用精灵演示 2
Store your desired -left position into a data attribute:
将所需的 -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:
CSS：
#picture{
width:25px;
height:25px;
background:url(/images/sprite.png) no-repeat;
}
Retrieve that data and move the packgroundPosition:
检索该数据并移动 packgroundPosition：
$('.button').click(function(){
var bgpos = $(this).data('bgpos');
$('#picture').css({backgroundPosition: -bgpos+' 0'})
});
回答by Stuart Wakefield
It all looks good for the second version, make sure you are wrapping your DOM calls in the document ready function, which can be written as...
对于第二个版本，一切看起来都不错，请确保将 DOM 调用包装在文档就绪函数中，该函数可以写为...
$(document).ready(function() {
...
});
Or...
或者...
$(function() {
...
});
So you get...
所以你得到...
$(function() {
$('#mtl').click(function(){
$('#picture').attr('src', 'images/short.png');
});
});
回答by Rabie Mohamed
Instead of adding event listeners to each link class you can just use it as an inline function on any link
您可以将其用作任何链接上的内联函数，而不是向每个链接类添加事件侦听器
function changeurl(theurl){
$('.myimage').attr('src', theurl);
}
回答by A_Nabelsi
The second one works fine but you have to use explicit path instead of relative path:
第二个工作正常，但您必须使用显式路径而不是相对路径：
$('#mtl').click(function(){
$('#picture').attr('src', '/images/short.png');
});
