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

Question

这是一个切换开关，当取消选中时，将显示 '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>

Answer 1

我已经调整了你的代码并添加了注释。

如果您想重复使用该复选框，只需更改您创建的每个新复选框的 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>

Answer 2

使用您当前的代码，试试这个：

function queryToggle() {
    let x = document.getElementsByClassName("text");
    for (let i = 0; i < x.length; i++) {
        console.log(x[i])
        if (x[i].innerHTML === "min") {
            x[i].innerHTML = "max";
        } else {
            x[i].innerHTML = "min";
        }
    }
}

由于 x 是一个 'array-like' 对象，您必须通过其索引遍历其中的每个项目，如果这有意义的话，您将对整个数组进行操作。

更短的版本

function queryToggle() {
    let x = document.getElementsByClassName("text");
    for (let i = 0; i < x.length; i++) {
        x[i].innerHTML = x[i].innerHTML === "min" ? "max" :"min";
    }
}

另一个带有扩展运算符的较短版本 不需要创建 x 数组，除非你在其他地方需要它，缺点是你将访问 DOM 每次通话

function queryToggle() {
    [...document.getElementsByClassName("t_text")].forEach((i)=>
        i.innerHTML = i.innerHTML === "min" ? "max" :"min")
}

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

How to iterate through all classes with a javascript toggle?

javascript

toggle

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