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如果不起作用

回答

相關問題