我有以下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");
任何人都知道我做错了什么,因为上面的代码不起作用。
此外,还有更好的方法来解决这个问题吗?
答案 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并在其上设置鼠标悬停事件会更好)