如何使用jQuery在点击时更改图像源？

Question

我目前正在构建一个完整的背景图像布局，我想根据用户访问的页面更改图像。为了达到这个目的：当用户点击链接时，我需要更改图像的属性。这是我已经做到的：

$(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" />

谢谢，可能很简单，但超出了我的理解范围！

- Johannes Kärnstam

---

可以的。你遇到了什么错误？ - Tejs

忘了告诉你们，它可以工作，但是一旦它更改了图像，它会立即更改回第一张图像... - Johannes Kärnstam

@Johannes，请看下面的回答。这是由于您的链接导致页面刷新，您需要使用preventDefault()来阻止这种情况发生。 - Naftali

@Neal 啊，我马上试一下... - Johannes Kärnstam

它没有返回任何结果（链接）。无论如何，谢谢。 - Johannes Kärnstam

Answer 1

之所以会返回，是因为默认情况下，当你点击一个链接时，它会跟随链接并加载页面。 在你的情况下，你不想这样。你可以通过执行e.preventDefault()（如Neal所提到的）或返回false来阻止它：

$(function() {
 $('.menulink').click(function(){
   $("#bg").attr('src',"img/picture1.jpg");
   return false;
 });
});

关于preventDefault和return false之间的区别的有趣问题。

在这种情况下，因为事件不需要传播，所以使用return false完全可以。

- Hugo Migneron

Answer 2

您需要使用preventDefault()来防止在单击链接时进行跳转：

示例代码：http://jsfiddle.net/maniator/Sevdm/

$(function() {
 $('.menulink').click(function(e){
     e.preventDefault();
   $("#bg").attr('src',"img/picture1.jpg");
 });
});

- Naftali

Answer 3

对于这个问题，你应该考虑使用一个按钮。链接通常用于链接其他页面。按钮可以用于添加其他功能。Neals的解决方案可行，但只是一种变通方法。

如果您使用 <button> 而不是 <a>，您的原始代码应该按预期工作。

- Frederik Wordenskjold

Answer 4

您可以使用jQuery的attr()函数，如$("#id").attr('src', "source")。

- mehran

Answer 5

 $('div#imageContainer').click(function () {
      $('div#imageContainerimg').attr('src', 'YOUR NEW IMAGE URL HERE'); 
});

- GM Marimuthu

Answer 6

当您单击文本或链接时，图像将更改为另一张图像，因此您可以使用下面的脚本来帮助您在单击链接时更改图像：

<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：

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

- M. Lak