Question

我的jquery代码有问题。问题是，当添加一个类night_day时，立即开始下一个if。我该如何解决？谢谢你的回答。

$(document).ready(function(){
    $( "#light_switch" ).click(function() {

        if ( $( this ).hasClass( "day_night" ) ) {

            $(".logo").css("background-image", "url('img/CH_logo_web_white.png')");
            $("body").css("background-color", "#374356");
            $("body").css("color", "#8c8c8c");
            $(".info h2").css("color", "#d1d1d1");
            $(".shoot-left .desc h2").css("color", "#8c8c8c");
            $(".shoot-right .desc h2").css("color", "#8c8c8c");
            $("#footer p").css("color", "#d1d1d1");

            $("#light_switch").removeClass("day_night").addClass("night_day");
        }

        if ( $( this ).hasClass( "night_day" ) ) {

            $(".logo").css("background-image", "url('img/CH_logo_web_white.png')");
            $("body").css("background-color", "#FFFFFF");
            $("body").css("color", "#8c8c8c");
            $(".info h2").css("color", "#d1d1d1");
            $(".shoot-left .desc h2").css("color", "#404040");
            $(".shoot-right .desc h2").css("color", "#404040");
            $("#footer p").css("color", "#8c8c8c");

            $("#light_switch").removeClass("night_day").addClass("day_night");
        }
    });
});

<div id="light_switch" class="day_night"></div>

Answer 1

尝试使用toggleClass之类的，

$( "#light_switch" ).click(function() {

    if ( $( this ).hasClass( "day_night" ) ) {

        $(".logo").css("background-image", "url('img/CH_logo_web_white.png')");
        $("body").css("background-color", "#374356");
        $("body").css("color", "#8c8c8c");
        $(".info h2").css("color", "#d1d1d1");
        $(".shoot-left .desc h2").css("color", "#8c8c8c");
        $(".shoot-right .desc h2").css("color", "#8c8c8c");
        $("#footer p").css("color", "#d1d1d1");            
    }

    if ( $( this ).hasClass( "night_day" ) ) {

        $(".logo").css("background-image", "url('img/CH_logo_web_white.png')");
        $("body").css("background-color", "#FFFFFF");
        $("body").css("color", "#8c8c8c");
        $(".info h2").css("color", "#d1d1d1");
        $(".shoot-left .desc h2").css("color", "#404040");
        $(".shoot-right .desc h2").css("color", "#404040");
        $("#footer p").css("color", "#8c8c8c");
    }
    // use toggleClass after if-else condition
    $("#light_switch").toggleClass("day_night night_day");
});

您可以通过合并选择器来缩短代码，例如

 $(".logo").css("background-image", "url('img/CH_logo_web_white.png')");
 $("body").css({"background-color":"#374356","color":"#8c8c8c"});
 $(".shoot-left .desc h2, .shoot-right .desc h2").css("color", "#8c8c8c");
 $("#footer p,.info h2").css("color", "#d1d1d1");

Answer 2

您可以使用else if

$(document).ready(function(){
    $( "#light_switch" ).click(function() {

        if ( $( this ).hasClass( "day_night" ) ) {

            $(".logo").css("background-image", "url('img/CH_logo_web_white.png')");
            $("body").css("background-color", "#374356");
            $("body").css("color", "#8c8c8c");
            $(".info h2").css("color", "#d1d1d1");
            $(".shoot-left .desc h2").css("color", "#8c8c8c");
            $(".shoot-right .desc h2").css("color", "#8c8c8c");
            $("#footer p").css("color", "#d1d1d1");

            $("#light_switch").removeClass("day_night").addClass("night_day");
        }

        else if ( $( this ).hasClass( "night_day" ) ) {

            $(".logo").css("background-image", "url('img/CH_logo_web_white.png')");
            $("body").css("background-color", "#FFFFFF");
            $("body").css("color", "#8c8c8c");
            $(".info h2").css("color", "#d1d1d1");
            $(".shoot-left .desc h2").css("color", "#404040");
            $(".shoot-right .desc h2").css("color", "#404040");
            $("#footer p").css("color", "#8c8c8c");

            $("#light_switch").removeClass("night_day").addClass("day_night");
        }
    });
});

Jquery如果不起作用

2 个答案: