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>

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

---

还有，有没有更好的方法来处理这个问题？

'.ref_2'指向div，您必须访问div中的图像

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

---

可能会为您这样做。

您需要选择侧面的img标签。参考2

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

不过，最好将图像定义放在css和交换类中

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

.toggleOn分区{
背景：url（'toggleOn.png'）不重复；
}
.toggleOff div{
背景：url（'toggleOff.png'）不重复；
}
...
...
...
...
...
...
$（'.ref_2'）.removeClass（'toggleOn'）.addClass（'toggleOff'）；

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

---

另外，看起来您正在使用ref#作为唯一标识符，如果是这样，那么最好将其作为div的ID，这将加快jQuery查找元素的能力

我喜欢做的是将主文档中的两个图像都放在一个隐藏的div中，如：

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

---

另一种解决方案是将两个图像置于绝对位置，默认设置为前面（使用z索引属性）

---

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

如果这更好，我将如何将其放入CSS中？您可能需要刷新，我已经修复了它。

<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());