单击按钮时setInterval + image src更改

Question

I want to give blink effect(dark and light) when clicked on the button.I have written the following code but it does not work.So please help me.

$(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 is your source attribute, yet you are trying to wrap it in jQuery, that won't make it an object. You'll have to target #red again and then set the source:

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

Answer 2

It seems the question might be how to make the button blink. This can be done with the css background-color property. CSS is a better fit, assuming lightRed and darkRed are solid colors. If the images are required you can use the background-image property.

<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>