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

Posted 2023-03-05

【中文标题】如何使用 jQuery 在点击时更改图像源？

【英文标题】：How can I change image source on click with jQuery?

【发布时间】：2011-07-31 02:06:01

【问题描述】：

我目前正在构建一个完整的背景图像布局，我想根据用户正在访问的页面更改图像。言归正传：当用户单击链接时，我需要更改图像属性。这是我走了多远：

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

谢谢你，可能很简单，但在我头上！

【问题讨论】：

应该可以。您遇到什么错误？

@Tejs 我相信这是一个防止默认问题

忘了告诉你们，它可以工作，但是一旦它改变了图像，它就会变回第一个图像......

@Johannes ，请参阅下面的答案。这是由于您的链接正在刷新页面，您需要使用preventDefault() 来阻止这种情况的发生

@Neal 啊我马上试试...

【参考方案1】：

它会切换回来，因为默认情况下，当您单击链接时，它会跟随链接并加载页面。 在你的情况下，你不想要那个。您可以通过执行 e.preventDefault(); 来防止它。 （就像尼尔提到的）或返回 false ：

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

Interesting question关于防止默认和返回假的区别。

在这种情况下，返回 false 就可以正常工作，因为不需要传播事件。

【参考方案2】：

您需要使用preventDefault() 来制作它，这样当您单击它时链接不会通过：

小提琴：http://jsfiddle.net/maniator/Sevdm/

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

【参考方案3】：

您应该考虑为此使用按钮。链接通常应用于链接。按钮可用于您希望添加的其他功能。 Neals 解决方案有效，但它是一种解决方法。

如果您使用<button> 而不是<a>，您的原始代码应该可以正常工作。

【参考方案4】：

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

【参考方案5】：

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

【参考方案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"  ></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;
#imagewidth:348px; height:375px; border-radius:100%;margin:0 auto; margin-top:50px; margin-bottom:20px;
#thumbwidth:400px;margin:0 auto; display:none;
ullist-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>