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

Question

我有两种模式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');
  }
};

document.getElementById("chk").addEventListener('change', () => {
  document.body.classList.toggle('dark');
  document.body.classList.toggle('light');
  localStorage.darkMode = (localStorage.darkMode == "true") ? "false" : "true";
});

$("#buttonPopupMode .button-primary").on('click', function() {
  $('#popupMode').hide();
})

Answer 1

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

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

此外，除了fadeIn() 和delay() 之外，我只使用JS 简化了您的code。还可以使用DOMContentLoaded 方法来确保所有脚本都准备就绪，以便在 DOM 准备好时使用。

实时工作演示：（您需要在浏览器上进行测试，因为 Stack Snippets 不支持本地存储）

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>