jQuery的：如何來回切換圖像？

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屬性）。

鼠標懸停時，您可以將其隱藏在前面，然后將顯示關閉的圖像。 使用此方法的優點是您實際上可以使用動畫技術使其更加平滑。 這就是我在這里所做的。 （如果您有一個額外的wrapper div並在其上設置鼠標懸停事件，那會更好）