圖像切換按鈕只能工作一次

我有一個圖像按鈕，我試圖切換。但是，刷新時只切換一次。當我點擊圖片時，它應該改變到第二張圖片，並在下一次點擊時，改回到原始圖片。通過此代碼，我可以從第一張圖片開始查看第二張圖片，但是當我再次點擊時，我無法獲取原始圖片。有人能指出我要去哪裏嗎？這是整個劇本，我現在用圖像切換按鈕只能工作一次

HTML &的jQuery -

<a href='#'> 
     <input type="image" src="/images/pulpit.jpg" id="btn-true" /> 
</a> 


<script type="text/javascript"> 
      $('#btn-true').click(function() { 
       if ($(this).prop("src", "/images/pulpit.jpg")) 
        $(this).prop("src", "smiley.gif"); 
       else if ($(this).prop("src", "smiley.gif")) 
        $(this).prop("src", "/images/pulpit.jpg"); 
      }); 
     </script>

來源

2013-07-09 TechnoBlahble

你無法使用.toggle（function .........？ –

上面這段代碼在w3schools編輯器中工作正常，但是當我在.net mvc 4 web應用程序中使用相同的代碼時，。任何原因，我可能會錯過什麼？ – TechnoBlahble

你的條件語句是有點不對，你實際上是在分配給您的支票的來源，改變線路：

if ($(this).prop("src", "/images/pulpit.jpg")) 
else if ($(this).prop("src", "smiley.gif"))

要：

if ($(this).prop("src") == "/images/pulpit.jpg") 
else if ($(this).prop("src") == "smiley.gif")

來源

2013-07-09 12:53:38 tymeJV

正如你指出的那樣，我在條件中犯了一個錯誤，而且它應該是.attr而不是.prop謝謝！:) – TechnoBlahble

首先你應使用.attr()代替屬性和.prop()代替屬性。然後，您需要比較輸出，而不是將其設置爲您正在嘗試的輸出。看看這個：

$('#btn-true').click(function() { 
       if ($(this).attr("src") == "/images/pulpit.jpg") { 
        $(this).attr("src", "smiley.gif"); 
       } else if ($(this).attr("src") == "smiley.gif") { 
        $(this).attr("src", "/images/pulpit.jpg"); 
       } 
      });

來源

2013-07-09 12:55:04 Eric

這就像一個魅力！非常感謝！ – TechnoBlahble

這段代碼在w3schools編輯器中工作正常，但是當我在.net mvc 4 web應用程序中使用相同的代碼時，沒有任何反應。任何原因，我可能會錯過什麼？ – TechnoBlahble

確保你首先包含了jQuery。然後檢查控制檯是否有錯誤。 – Eric

而不是檢查和更改圖像的URL你應該處理CSS類。例如，當你點擊圖像時，你檢查這個圖像是否被切換。

if ($(this).hasClass("toggle")) 
    $(this).removeClass("toggle"); 
else 
    $(this).addClass("toggle");

然後你在你的CSS中指定你的圖像路徑。

img { background-image:url(/images/pulpit.jpg); } 
img.toggle { background-image:url(smiley.gif); }

編輯：

更換你的內容通過

$(this).toggleClass('toggle');

JavaScript函數的結果將是完全一樣的，但通過@Eric作爲mentionned它是更好的使用toggleClass()方法。

每次點擊圖片時，「切換」CSS類將被添加，如果它尚未，否則它將被刪除。

然後你可以在CSS中管理它（在你的情況下添加上面提到的兩個CSS類來顯示不同的圖像）。

來源

2013-07-09 13:02:18 glautrou

聰明！ '$（this）.toggleClass（'toggle'）;'可能會更乾淨btw :-) – Eric

當然，感謝您發現這一點。 – glautrou

@glautrou - 你能否用一個例子來闡明你的想法？ – TechnoBlahble

圖像切換按鈕只能工作一次

回答

相關問題