Jquery 在单击时更改图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5571285/
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
Jquery change image on click
提问by Johannes K?rnstam
I 'm currently building a full background image layout and I want to change the image based on which page the user is visiting. To get to the point: I need to change a images attribute when the user clickes on a link. This is how far I got:
我目前正在构建一个完整的背景图像布局，我想根据用户正在访问的页面更改图像。切入正题：当用户单击链接时，我需要更改图像属性。这是我走了多远：
$(function() {
$('.menulink').click(function(){
$("#bg").attr('src',"img/picture1.jpg");
});
});
<a href="" title="Switch" class="menulink">switch me</a>
<img src="img/picture2.jpg" id="bg" />
Thank you, probably easy stuff, but over my head!
谢谢你，可能很简单，但在我头上！
回答by Hugo Migneron
It switches back because by default, when you click a link, it follows the link and loads the page. In your case, you don't want that. You can prevent it either by doing e.preventDefault(); (like Neal mentioned) or by returning false :
它会切换回来，因为默认情况下，当您单击链接时，它会跟随链接并加载页面。在你的情况下，你不想要那样。您可以通过执行 e.preventDefault(); 来阻止它。（如 Neal 提到的）或返回 false ：
$(function() {
$('.menulink').click(function(){
$("#bg").attr('src',"img/picture1.jpg");
return false;
});
});
Interesting questionon the differences between prevent default and return false.
关于防止默认和返回假之间差异的有趣问题。
In this case, return false will work just fine because the event doesn't need to be propagated.
在这种情况下， return false 会正常工作，因为不需要传播事件。
回答by Naftali aka Neal
i will help you one sec ill make you a fiddle ^_^
我会帮你一秒钟让你成为小提琴^_^
UPDATE
更新
you need to use preventDefault()to make it so the link does not go through when u click on it:
您需要使用preventDefault()它来制作它，以便在您单击它时不会通过链接：
fiddle: http://jsfiddle.net/maniator/Sevdm/
小提琴：http: //jsfiddle.net/maniator/Sevdm/
$(function() {
$('.menulink').click(function(e){
e.preventDefault();
$("#bg").attr('src',"img/picture1.jpg");
});
});
回答by mehran
you can use "attr" Function!!! st like `$("#id").attr('src',"source");
你可以使用“attr”函数！！！st like `$("#id").attr('src',"source");
回答by GM Marimuthu
$('div#imageContainer').click(function () {
$('div#imageContainerimg').attr('src', 'YOUR NEW IMAGE URL HERE');
});
回答by M. Lak
When you click the text or link the image will be changed to another image so you can use the below script helps to you to change image on click the link:
当您单击文本或链接时，图像将更改为另一个图像，因此您可以使用以下脚本帮助您在单击链接时更改图像：
<script>
$(document).ready(function(){
$('li').click(function(){
var imgpath = $(this).attr('dir');
$('#image').html('<img src='+imgpath+'>');
});
$('.btn').click(function(){
$('#thumbs').fadeIn(500);
$('#image').animate({marginTop:'10px'},200);
$(this).hide();
$('#hide').fadeIn('slow');
});
$('#hide').click(function(){
$('#thumbs').fadeOut(500,function (){
$('#image').animate({marginTop:'50px'},200);
});
$(this).hide();
$('#show').fadeIn('slow');
});
});
</script>
<div class="sandiv">
<h1 style="text-align:center;">The Human Body Parts :</h1>
<div id="thumbs">
<div class="sanl">
<ul>
<li dir="5.png">Human-body-organ-diag-1</li>
<li dir="4.png">Human-body-organ-diag-2</li>
<li dir="3.png">Human-body-organ-diag-3</li>
<li dir="2.png">Human-body-organ-diag-4</li>
<li dir="1.png">Human-body-organ-diag-5</li>
</ul>
</div>
</div>
<div class="man">
<div id="image">
<img src="2.png" width="348" height="375"></div>
</div>
<div id="thumbs">
<div class="sanr" >
<ul>
<li dir="5.png">Human-body-organ-diag-6</li>
<li dir="4.png">Human-body-organ-diag-7</li>
<li dir="3.png">Human-body-organ-diag-8</li>
<li dir="2.png">Human-body-organ-diag-9</li>
<li dir="1.png">Human-body-organ-diag-10</li>
</ul>
</div>
</div>
</div>
css:
css：
<style>
body{ font-family:Tahoma, Geneva, sans-serif; color:#ccc; font-size:11px; margin:0; padding:0; background-color:#111111}
.sandiv{ width:980px;height:570px;margin:0 auto;margin-top:20px; padding:10px; background-color:#000;-webkit-box-shadow: 0 1px 2px #666;box-shadow: 0 1px 2px #666;}
#image{width:348px; height:375px; border-radius:100%;margin:0 auto; margin-top:50px; margin-bottom:20px;}
#thumb{width:400px;margin:0 auto; display:none;}
ul{list-style:none; padding:0; margin:0;}
li{ width:auto ; height:50px; border-radius:100%; margin:5px; cursor:pointer; }
.sanl
{
margin-top:50px;
float:left;
width:210px;
margin-left:30px;
margin-right:30px;
}
.sanr
{
margin-top:50px;
float:left;
width:210px;
margin-left:60px;
margin-right:30px;
}
.man
{
float:left;
width:350px;
margin-left:30px;
margin-right:30px;
}
</style>
I think the above code is very useful to you. This code i get from hereor demohere for your reference
回答by Frederik Wordenskjold
You should consider using a button for this. Links generally should be use for linking. Buttons can be used for other functionality you wish to add. Neals solution works, but its a workaround.
您应该考虑为此使用按钮。链接一般应该用于链接。按钮可用于您希望添加的其他功能。Neals 解决方案有效，但它是一种解决方法。
If you use a <button>instead of a <a>, your original code should work as expected.
如果您使用 a<button>而不是 a <a>，您的原始代码应该按预期工作。
