Javascript夜间模式 - 单击更改背景颜色的功能答案

【问题标题】：Javascript night mode - Click function that changes background colorJavascript夜间模式 - 单击更改背景颜色的功能
【发布时间】：2023-03-08 12:35:02
【问题描述】：

我正在编写一个网站，我希望能够在白天模式和夜间模式之间切换。它不起作用，我需要这里的帮助。提前谢谢你。

HTML

<div>
<input type="checkbox" class="checkbox" id="chk" />
<label class="label" for="chk">
    <i class="fas fa-moon"></i>
    <i class="fas fa-sun"></i>
    <div class="ball"></div>
</label>

脚本

$(document).ready(function(){
  $("#chk").click(function(){
    $("body").css("background-color", "black");
  });
});

【问题讨论】：

“不工作”是对问题的错误描述。请准确告诉我们您期望发生的事情，而不是发生的事情，等等。请参阅How to Ask 了解更多提示，以避免您的问题被关闭和/或否决。

标签： javascript jquery css

【解决方案1】：

在您的方法中，当<input> 元素的点击事件触发时，<body> 元素的背景颜色会不断分配black；此行为不会产生切换效果。

方法一

您可以使用 <input> 元素的 change 事件在白天和夜间模式之间切换：

$(document).ready(function(){
  function changeColor(newBgColor) {
    $("#sun").css({color: newBgColor});
    $("#moon").css({color: newBgColor});
  }

  /* When the <input> element's change event fires */
  $('#chk').change(function() {
    if(this.checked) {
      $("body").css("background-color", "black");
      changeColor("white");
    }
    else {
      $("body").css("background-color", "white");
      changeColor("black");
    }
  });  
});

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" integrity="sha512-Fo3rlrZj/k7ujTnHg4CGR2D7kSs0v4LLanw2qksYuRlEzO+tcaEPQogQ0KaoGN26/zrn20ImR1DfuLWnOo7aBA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div>
  <input type="checkbox" class="checkbox" id="chk" />
  
  <label class="label">
      <i id="moon" class="fas fa-moon"></i>
      <i id="sun" class="fas fa-sun"></i>
      <div class="ball"></div>
  </label>
</div>

方法二

您可以通过为 <i> 元素指定 id 来解决此问题。

$(document).ready(function(){
  function changeColor(newBgColor) {
    $("#sun").css({color: newBgColor});
    $("#moon").css({color: newBgColor});
  }
  
  /* Fires when clicking <i> with id value of "sun" */
  $("#sun").click(function(){
    $("body").css("background-color", "black");
    changeColor("white");
  });
  
  /* Fires when clicking <i> with id value of "moon" */
  $("#moon").click(function(){
    $("body").css("background-color", "white");
    changeColor("black");
  });
});

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" integrity="sha512-Fo3rlrZj/k7ujTnHg4CGR2D7kSs0v4LLanw2qksYuRlEzO+tcaEPQogQ0KaoGN26/zrn20ImR1DfuLWnOo7aBA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div>
  <label class="label">
      <i id="moon" class="fas fa-moon"></i>
      <i id="sun" class="fas fa-sun"></i>
      <div class="ball"></div>
  </label>
</div>

【讨论】：

【解决方案2】：

您可以使用 css 规则将背景设为黑色 (.black) 并使用 toggleClass() 使其工作

$(document).ready(function(){
  $("#chk").click(function(){
    $("body").toggleClass('black');
  });
});

.black { background-color:#000 }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" class="checkbox" id="chk" />
<label class="label" for="chk">
    <i class="fas fa-moon"></i>
    <i class="fas fa-sun"></i>
    <div class="ball"></div>
</label>

【讨论】：