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>