时间戳

首页 > 解决方案 > 如何使用 javascript 切换遍历所有类？

javascript - 如何使用 javascript 切换遍历所有类？

问题描述

这是一个拨动开关，未选中时将显示“min”。如果选中，则“min”将切换到“max”并来回切换。

我的预期结果是，无论此复选框在页面上出现多少次，该功能都将在整个页面上起作用。

var x = document.getElementsByClassName("text");
function queryToggle() {
    for (let i = 0; i < x.length; i++) {
        if (x.innerHTML === "min") {
            x.innerHTML = "max";
        } else {
            x.innerHTML = "min";
        }
    }
}
<div class="options mb-2">
  <label for="toggleQuery">Use 'max-width'?</label>
  <input type="checkbox" name="toggleQuery" id="toggleQuery" onclick="queryToggle()" />
</div>

<span class="text">min</span>

标签： javascripttoggle

解决方案

我已经调整了您的代码并包含了注释。

如果您想重复使用该复选框，则只需更改您创建的每个新复选框的 id，它将在整个页面中工作。

运行以下代码段：

//your span
var x = document.getElementsByClassName("text");

//here we are passing "input" as a function parameter
function queryToggle(input) {

  //checkbox will take the id of any new input we create on the page
  //the id must change for each new checkbox
  var checkbox = document.getElementById(input.id);
  
  for (let i = 0; i < x.length; i++) {
    //check if checkbox is checked, if checked then change innerHTML to "max"
    if (checkbox.checked == true) {
      x[i].innerHTML = "max";
      
      // else change innerHTML to "min"
    } else {
      x[i].innerHTML = "min";
    }
  }
}
<div class="options mb-2">
  <label for="toggleQuery">Use 'max-width'?</label>
  <input type="checkbox" name="toggleQuery" id="toggleQuery1" onChange="queryToggle(this)" />
  <input type="checkbox" name="toggleQuery" id="toggleQuery2" onChange="queryToggle(this)" />
  <input type="checkbox" name="toggleQuery" id="toggleQuery3" onChange="queryToggle(this)" />
  <input type="checkbox" name="toggleQuery" id="toggleQuery4" onChange="queryToggle(this)" />
</div>

<span class="text">min</span>
<span class="text">min</span>
<span class="text">min</span>
<span class="text">min</span>
<span class="text">min</span>

推荐阅读