JQuery:如何来回切换图像?

时间:2010-02-15 21:52:56

标签: javascript jquery

我有以下HTML:

<div class="listing ref_1">
    ...
    <div><img src="toggleON.png" /></div>
    ...
</div>
<div class="listing ref_2">
    ...
    <div><img src="toggleON.png" /></div>
    ...
</div>

<div class="listing ref_3">
    ...
    <div><img src="toggleON.png" /></div>
    ...
</div>

我想要的是以编程方式将toggleON.png图片更改为toggleOFF.png

我正在尝试使用以下代码来执行此操作,但它无效:

$('.ref_2').src("toggleOFF.png");

任何人都知道我做错了什么,因为上面的代码不起作用。

此外,还有更好的方法来解决这个问题吗?

4 个答案:

答案 0 :(得分:1)

'。ref_2'指向div,你必须得到div中的图像

$('.ref_2 img').attr("src","toggleOFF.png");

可能会为你做。

答案 1 :(得分:1)

您需要在.ref_2

一侧选择img标签
$('.ref_2 img').attr("src","toggleOFF.png");

将图像定义放在css和swap类中可能会更好。

<style>
.toggleOn div{
   background: url('toggleOn.png') no-repeat;
}
.toggleOff div{
   background: url('toggleOff.png') no-repeat;
}
</script>

<div class="listing ref_1 toggleOn">
    ...
    <div></div>
    ...
</div>
<div class="listing ref_2 toggleOn">
    ...
    <div></div>
    ...
</div>

<div class="listing ref_3 toggleOn">
    ...
    <div></div>
    ...
</div>

<script>
$('.ref_2').removeClass('toggleOn').addClass('toggleOff');
</script>

这使得更改图像非常容易,如果您需要稍后检查,可以将该类用作状态切换。

此外,您似乎使用ref_#作为唯一标识符,如果是这样,那么最好使其成为div的ID,将加快jQuery查找元素的能力。

答案 2 :(得分:0)

我喜欢做的是将我的主文档中的两个图像放在一个隐藏的div中,例如:

<div style="position: absolute; visibility: hidden">
  <img id="toggleON" src="/whatever/toggleON.png" .../>
  <img id="toggleOFF" src="/whatever/toggleOff.png" .../>
</div>

这样他们都在浏览器的缓存中。然后,要将图像从一个切换到另一个,您可以执行以下操作:

$(".whatever img").replaceWith($("#toggleON").clone());

答案 3 :(得分:0)

另一个解决方案是将两个图像放在绝对位置,默认一个设置在前面(使用z-index属性)。

在鼠标悬停时,您可以隐藏前面的那个,并显示切换关闭图像。使用此方法的优点是您实际上可以使用动画技术使其更加平滑。这就是我所做的here。 (如果你有一个额外的包装div并在其上设置鼠标悬停事件会更好)