jquery如果不起作用

-3

我有问题，我的jQuery代码。问题是，如果添加班级night_day，立即开始下一个。我该如何解决它？感谢您的答案。jquery如果不起作用

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

来源

2015-02-23 Energy

你这是什么意思是“逐渐走向”？ “如果”应该是“立即开始另一个”呢？ – 2015-02-23 09:43:56

我不确定我是否遵循...我会建议您将代码剥离到一个最小示例并重新提出您的问题。 – Seb 2015-02-23 09:45:05

尝试使用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");

来源

2015-02-23 09:44:48

非常感谢！ – Energy 2015-02-23 09:48:15

可以使用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"); 
     } 
    }); 
});

来源

2015-02-23 09:50:26

jquery如果不起作用

回答

相关问题