單擊按鈕時setInterval + image 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>