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