Question

我有以下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");

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

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

Answer 1

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

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

可能会为你做。

Answer 2

您需要在.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查找元素的能力。

Answer 3

我喜欢做的是将我的主文档中的两个图像放在一个隐藏的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());

Answer 4

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

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

JQuery：如何来回切换图像？

4 个答案: