setInterval +圖片src在點擊按鈕時發生變化

Question

我想在點擊按鈕時給予眨眼效果（黑暗和光明）。我寫了下面的代碼，但它不起作用。所以請幫助我。

$(document).ready(function() { 

    $(".search").click(function() { 
     setInterval(function() { 
      var curSrc = $("#red").attr('src'); 

      if (curSrc === '../images/lightred.jpg') { 
       $(curSrc).attr("src", "../images/Darkred.jpg"); 
      } 
      if (curSrc === '../images/Darkred.jpg') { 
       $(curSrc).attr("src", "../images/lightred.jpg"); 
      } 
     }, 2000); 
    }); 

}); 

Answer 1

curSrc是源屬性，但你試圖把它包在jQuery的，不會讓一個對象。你必須再次瞄準#red，然後設置源：

if (curSrc === '../images/lightred.jpg') { 
      $("#red").attr("src", "../images/Darkred.jpg"); 
} 
if (curSrc === '../images/Darkred.jpg') { 
      $("#red").attr("src", "../images/lightred.jpg"); 
} 

Answer 2

看來問題可能是如何使按鈕閃爍。這可以用css background-color屬性來完成。假設lightRed和darkRed是純色，CSS更合適。如果圖像是必需的，您可以使用background-image屬性。

<input type="button" class="search lightRed" value="Search"/> 
<style> 
    .lightRed { background-color: lightcoral } 
    .darkRed { background-color: darkRed } 
</style> 
<script> 
    $(document).ready(function(){ 
     $(".search").click(function(){ 
      setInterval(function(){ 
       var isLightRed = $(".search").hasClass("lightRed"); 
       if (isLightRed) { 
        $(".search").removeClass("lightRed").addClass("darkRed"); 
       } else { 
        $(".search").removeClass("darkRed").addClass("lightRed"); 
       } 
      },2000); 
     }); 
    }); 
</script>