当 mySwitch 为 untoggled/unchecked 时，toggle/checked 不再起作用，不会再次更改我的背景

Question

我有 2 个拨动开关，我遇到的问题是让每个拨动开关各自做自己的事情。在 javascript 中，我无法为我的第二个拨动开关做出 if/else 声明。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Asignment 3</title>
<link rel="shortcut icon" href="https://cdn-icons-png.flaticon.com/512/136/136724.png" type="image/x-icon">

<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>

<div id="RainbowId">


<div id="mySidebar" class="sidebar">
<a class="closebtn" onclick="closeNav()">×</a>
<a>RAINBOW MODE</a>
<a><label class="switch"><input type="checkbox"><div class="slider round"><div id="text">OFF</div></div></label></a>
<a><br></a>
<a><br></a>
<a>DO NOT TOUCH</a>
<a><label class="switch2"><input type="checkbox2"><div class="slider2 round2"><div id="text2">OFF</div></div></label></a>
</div>


<button class="openbtn" id="openBtnId" onclick="openNav()">⚙️</button>  


</div>
</body>
</html>

第一个开关的第一个 if 语句有效，但是当我复制代码时，我无法为 javascript 和 CSS.

的 CHECKBOX 创建 ID

function openNav() {
    document.getElementById("mySidebar").style.width = "250px"; 
}

function closeNav() {
    document.getElementById("mySidebar").style.width = "0";
}


document.addEventListener('DOMContentLoaded', function () {
    var checkbox = document.querySelector('input[type="checkbox"]');
    
  checkbox.addEventListener('change', function () {
    if (checkbox.checked) {
        RainbowId.classList.toggle('Rainbow');
        document.getElementById('text').innerHTML = 'ON'; 
    }
    else {
        RainbowId.classList.toggle("Rainbow");
        document.getElementById('text').innerHTML = 'OFF';
    }
  });
});

我给了第二个开关自己的 classes 但不能给 CHECKBOX 自己的 class.

/* Rainbow background*/
.Rainbow { 
    height: 100%;
    width: 100%;
    left:0;         
    right: 0;
    top: 0;
    bottom: 0;
    background: linear-gradient(#ff0000, #ff4000, #ff8000, #ffbf00, #ffff00, #bfff00, #80ff00, #40ff00, #00ff00, #00ff40, #00ff80, #00ffbf, #00ffff, #00bfff, #0080ff, #0040ff, #0000ff, #4000ff, #8000ff, #bf00ff, #ff00ff, #ff00bf, #ff0080, #ff0040, #ff0000);
    position: absolute;
    background-size: 1800% 1800%;
    -webkit-animation: rainbow 3s ease infinite;
    animation: rainbow 3s ease infinite;
}

@keyFrames rainbow {
    0%{background-position:0% 82%}
    25%{background-position: 50% 9.5%}
    50%{background-position:100% 19%}
    75%{background-position: 75% 41%}
    100%{background-position:0% 82%}
}

/* Sidebar Styles */
.sidebar {
    height: 100%;
    width: 0;
    position: fixed;
    top: 0;
    left: 0;
    background: grey;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
    overflow-x: hidden;
    transition: 1s;
}

.sidebar a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: white;
    display: block;
    white-space: nowrap;
    transition: 0.3s;
}

.closebtn {
    cursor: pointer;
}

.sidebar .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 40px;
}

.openbtn {
    font-size: 40px;
    cursor: pointer;
    border: none;
    background: none;
}

.openbtn:hover {
    opacity: 50%;
}

br {
    user-select: none;
}

/* Toggle Switch Styles */
.switch {
    position: absolute;
    width: 60px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.switch input {
    display:none;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: .4s;
}

input:checked + .slider {
    background-color: #2196F3;
}

input:focus + .slider {
    box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
    transform: translateX(26px);
}

.slider.round {
    border-radius: 34px;
}

.slider.round:before {
    border-radius: 50%;
}

.switch #text {
    user-select: none;
    position: absolute;
    left: 60px;
    margin-left: 10px;
}

/*Toogle Switch 2*/
.switch2 {
    position: absolute;
    width: 60px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.switch2 input {
    display:none;
}

.slider2 {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
}

.slider2:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: .4s;
}

input:checked + .slider2 {
    background-color: #2196F3;
}

input:focus + .slider2 {
    box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider2:before {
    transform: translateX(26px);
}

.slider2.round2 {
    border-radius: 34px;
}

.slider2.round2:before {
    border-radius: 50%;
}

.switch2 #text2 {
    user-select: none;
    position: absolute;
    left: 60px;
    margin-left: 10px;
}

Answer 1

按如下方式更改您的代码 - 使用 querySelectorAll 查找所有 .checkbox

您会看到 id="text"（和 text2）现在都是 class="text" 这很重要，因为我们可以获得被单击复选框的父级并使用 querySelector 来查找合适的text

document.addEventListener('DOMContentLoaded', function() {
  var checkboxes = document.querySelectorAll('input[type="checkbox"]');
  checkboxes.forEach(checkbox => {
    checkbox.addEventListener('change', function() {
      checkbox.parentElement.querySelector('.text').innerHTML = 
        checkbox.checked ? 'ON' : 'OFF';
      if (this.dataset.action === 'rainbow') {
        RainbowId.classList.toggle('Rainbow');
      } else {
        console.log('DO NOT TOUCH as TOUCHED');
      }
    });
  });
});

我还稍微整理了一下代码，使其更干

还有你的 html - 我加入了换行符以使其可读，但我知道这可能会导致问题，但至少你可以很容易地看到发生了什么变化

<div id="RainbowId">
  <div id="mySidebar" class="sidebar">
    <a class="closebtn" onclick="closeNav()">×</a>
    <a>RAINBOW MODE</a>
    <a>
      <label class="switch">
        <input type="checkbox" data-action="rainbow">
        <div class="slider round">
          <!-- added class here -->
          <div id="text" class="text">OFF</div>
        </div>
      </label>
    </a>
    <a><br></a>
    <a><br></a>
    <a>DO NOT TOUCH</a>
    <a>
      <label class="switch2">
        <input type="checkbox" data-action="not a rainbow">
        <div class="slider2 round2">
          <!-- added class here -->
          <div id="text2" class="text">OFF</div>
        </div>
      </label>
    </a>
  </div>
  <button class="openbtn" id="openBtnId" onclick="openNav()">⚙️</button>
</div>

当 mySwitch 为 untoggled/unchecked 时，toggle/checked 不再起作用，不会再次更改我的背景

When mySwitch is untoggled/unchecked, the toggle/checked no longer works, doesn't change my background again

html

javascript

css

if-statement