使用jQuery更改映像源

Question

使用jQuery更改映像源

我的DOM看起来是这样的：

<div id="d1">
   <div class="c1">
            <a href="#"><img src="img1_on.gif"></a>
            <a href="#"><img src="img2_on.gif"></a>
   </div></div>

当有人单击图像时，我希望图像src更改为<img src="imgx_off.gif">哪里x表示图像编号1或2。

这是可能的，还是我必须使用CSS来更改图像？

Answer 1

您可以使用jQuery的ATTR()功能。例如，如果您的img标记具有id属性“my_Image”，您可以这样做：<img&nbsp;id="my_image"&nbsp;src="first.jpg"/>然后，您可以更改src如下所示的jQuery图像：$("#my_image").attr("src","second.jpg");若要将此附加到click事件，您可以写：$('#my_image').on({ &nbsp;&nbsp;&nbsp;&nbsp;'click':&nbsp;function(){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$('#my_image').attr('src','second.jpg'); &nbsp;&nbsp;&nbsp;&nbsp;}});要旋转图像，可以这样做：$('img').on({ &nbsp;&nbsp;&nbsp;&nbsp;'click':&nbsp;function()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;src&nbsp;=&nbsp;($(this).attr('src')&nbsp;===&nbsp;'img1_on.jpg') &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;?&nbsp;'img2_on.jpg' &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:&nbsp;'img1_on.jpg'; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(this).attr('src',&nbsp;src); &nbsp;&nbsp;&nbsp;&nbsp;}});

Answer 2

想了解更多信息。我尝试使用jQuery中的attr方法为广告图像设置src属性，例如：$("#myid").attr('src', '/images/sample.gif');这个解决方案是有用的，它是有效的，但是如果改变路径也改变了图像的路径，而不能工作。我一直在寻找解决这个问题的方法，但一无所获。解决方案是将“\”放在路径的开头：$("#myid").attr('src', '\images/sample.gif');这个技巧对我非常有用，我希望它对其他人也有帮助。