为什么我的弹出模式下的切换模式不动？

Question

我有 2 模式switches。第一个用于navbar第二个，用于首次访问网站时的弹出窗口。一切正常，除了在弹出模式下开关不动但主体已更改为暗模式/亮模式。我已经尝试更改每个开关的 ID，但它仍然不起作用。我的主要问题是，弹出窗口中的开关没有移动。任何人都可以处理吗？我哪里做错了？完整代码可以在My Codepen中查看<div id="modeSwitcher">   <input type="checkbox" class="checkbox" id="chk" />   <label class="label" for="chk">     <i class="fas fa-moon"></i>     <div class="ball"></div>   </label></div> <!-- Popup Mode -->        <div id="popupMode">            <div class="container-fluid p-0 h-100">                <div class="row h-100">                    <div class="col-12 main-content">                        <div id="modeChoice">                            <div class="title">                                <h2>Welcome</h2>                                <p>                                    You can switch the button from light mode<br>to dark mode                                </p>                            </div>                            <div class="choose-mode">                                <div id="modeSwitcher">                                    <input type="checkbox" class="checkbox" id="chk" />                                    <label class="label" for="chk">                                        <i class="fas fa-moon"></i>                                        <div class="ball"></div>                                    </label>                                </div>                            </div>                            <div id="buttonPopupMode">                                <a href="#" class="btn button-primary">UNDERSTAND</a>                            </div>                        </div>                    </div>                </div>            </div>        </div>window.onload = function() {    $("#popupMode").delay(3000).fadeIn(500);  if (localStorage.darkMode == "true") {    document.body.classList.toggle('dark');    document.getElementById("chk").checked = true;  } else {    document.body.classList.toggle('light');  }};

Answer 1

首先，您需要class在复选框上使用 ainputs而不是因为idid 在页面中必须是唯一的，以避免出现问题。

此外，要选中所有复选框并使用一个复选框，addEventListener我们需要使用forEach循环来获取所有元素并change为其分配事件。这包括您popup和nav身体的拨动开关。

此外，我code通过仅使用fadeIn()除 和之外的 JS 来简化您的操作delay()。还使用DOMContentLoaded, 方法来确保所有脚本都准备好在 DOM 准备就绪时使用。

实时工作演示：（您需要在浏览器上进行测试，因为 Stack Snippets 没有 localStorage）

window.addEventListener('DOMContentLoaded', (event) => {

  //get all elements

  let getChecks = document.querySelectorAll('.checkBox_Toggle')

  let navCheckBox = document.querySelector('#chk_nav')

  let underStandBtns = document.querySelector('#buttonPopupMode .button-primary')

  let popUpEl = document.querySelector('#popupMode')

  //onload change checked 

  $('#popupMode').delay(3000).fadeIn(500);

  //check localStorage

  if (localStorage.darkMode == "true") {

    document.body.classList.toggle('dark');

    //set all switches to true

    getChecks.forEach(function(checkbox) {

      checkbox.checked = true;

    })

  } else {

    document.body.classList.toggle('light');

  }

  //Event Listener

  getChecks.forEach(function(checkbox) {

    checkbox.addEventListener('change', (e) => {

      if (e.target.getAttribute('id') == 'chk_popUp' && e.target.checked) {

            console.log('fdfd')

            navCheckBox.checked = true;

        } else if (e.target.getAttribute('id') == 'chk_nav' && e.target.checked) {

            navCheckBox.checked = true;

        } else {

            navCheckBox.checked = false;

        }

      document.body.classList.toggle('dark');

      document.body.classList.toggle('light');

      localStorage.darkMode = (localStorage.darkMode == "true") ? "false" : "true";

    });

  })

  //hide popup

  underStandBtns.addEventListener('click', () => {

    popUpEl.style.display = 'none';

  })

});

#modeSwitcher {

  margin: 5% 50%;

}

#modeSwitcher .checkbox {

  opacity: 0;

  position: absolute;

}

#modeSwitcher .checkbox:checked+.label .ball {

  transform: translateX(35px);

}

#modeSwitcher .checkbox:checked+.label .ball::after {

  content: '';

  position: absolute;

  background-color: #0A0E27;

  width: 13px;

  height: 13px;

  border-radius: 50%;

  bottom: 50%;

  left: -5%;

  transform: translateY(50%);

}

#modeSwitcher .label {

  background-color: #0A0E27;

  border-radius: 50px;

  cursor: pointer;

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 5px;

  margin: 0;

  position: relative;

  height: 16px;

  width: 50px;

  transform: scale(1.5);

}

#modeSwitcher .label .fa-moon {

  color: #0A0E27;

}

#modeSwitcher .label .ball {

  background-color: #FDC503;

  border-radius: 50%;

  position: absolute;

  top: 3px;

  left: 3px;

  height: 20px;

  width: 20px;

  transform: translateX(0px);

  transition: transform 0.2s linear;

}

#popupMode {

  display: none;

  width: 100%;

  height: 100%;

  background: rgba(22, 33, 92, 0.95);

  position: fixed;

  top: 0;

  z-index: 25;

}

#popupMode .main-content {

  display: flex;

  align-items: center;

  justify-content: center;

}

#popupMode .main-content #modeChoice {

  padding: 80px;

  background-color: #fff !important;

  border-radius: 20px;

  padding: 80px 85px 100px 85px;

}

@media screen and (max-width: 1600px) {

  #popupMode .main-content #modeChoice {

    padding: 56px 60px 70px 60px;

  }

}

#popupMode .main-content #modeChoice .title {

  text-align: center;

}

#popupMode .main-content #modeChoice .title h2 {

  color: #000;

  font-size: 40px;

}

@media screen and (max-width: 1600px) {

  #popupMode .main-content #modeChoice .title h2 {

    font-size: 28px;

  }

}

#popupMode .main-content #modeChoice .title p {

  color: #808080;

  font-size: 15px;

  margin-top: 20px;

}

@media screen and (max-width: 1600px) {

  #popupMode .main-content #modeChoice .title p {

    font-size: 13px;

    margin-top: 15px;

  }

}

#popupMode .main-content #modeChoice .choose-mode {

  display: flex;

  justify-content: center;

  align-items: center;

  margin: 60px 0 90px 0;

}

@media screen and (max-width: 1600px) {

  #popupMode .main-content #modeChoice .choose-mode {

    margin: 42px 0 63px 0;

  }

}

#popupMode .main-content #modeChoice .choose-mode p {

  color: #4b4b4b;

}

@media screen and (max-width: 1600px) {

  #popupMode .main-content #modeChoice .choose-mode p {

    font-size: 10px;

  }

}

#popupMode .main-content #modeChoice .choose-mode p.right {

  color: #c4c4c4;

  font-size: 13px;

}

@media screen and (max-width: 1600px) {

  #popupMode .main-content #modeChoice .choose-mode p.right {

    font-size: 10px;

  }

}

#popupMode .main-content #modeChoice #modeSwitcher label {

  background-color: #FCFCFC;

  border: 1px solid #D5D5D5;

}

#popupMode .main-content #modeChoice #modeSwitcher label .fa-moon {

  color: #FCFCFC;

}

#popupMode .main-content #modeChoice #modeSwitcher label .ball {

  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.2);

}

#popupMode .main-content #modeChoice #buttonPopupMode {

  display: flex;

  justify-content: center;

}

#popupMode .main-content #modeChoice #buttonPopupMode .button-primary {

  width: unset;

}

@media screen and (max-width: 1600px) {

  #popupMode .main-content #modeChoice #buttonPopupMode .button-primary {

    padding: 13px 50px;

    font-size: 12px;

  }

}

body.dark {

  background-color: black;

}

body.light {

  background-color: whitesmoke;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="modeSwitcher">

  <input type="checkbox" class="checkbox checkBox_Toggle" id="chk_nav" />

  <label class="label" for="chk_nav">

     <i class="fas fa-moon"></i>

     <div class="ball"></div>

   </label>

</div>

<!-- Popup Mode -->

<div id="popupMode">

  <div class="container-fluid p-0 h-100">

    <div class="row h-100">

      <div class="col-12 main-content">

        <div id="modeChoice">

          <div class="title">

            <h2>Welcome</h2>

            <p>

              You can switch the button from light mode<br>to dark mode

            </p>

          </div>

          <div class="choose-mode">

            <div id="modeSwitcher">

              <input type="checkbox" class="checkbox checkBox_Toggle" id="chk_popUp" />

              <label class="label" for="chk_popUp">

                                        <i class="fas fa-moon"></i>

                                        <div class="ball"></div>

                                    </label>

            </div>

          </div>

          <div id="buttonPopupMode">

            <a href="#" class="btn button-primary">UNDERSTAND</a>

          </div>

        </div>

      </div>

    </div>

  </div>

</div>