Question

我正在努力将我的功能应用于多个元素。我正在尝试做的是让每个元素自己单独更改。

仅第一个元素在更改。我正在尝试将其应用于所有三个，并且它们都应该分别更改。

例如：

不可用

可用

var myVar = setInterval(breakdown, 2000);

function breakdown() {

  var d = Math.random();

  if (d < 0.90) {
    str = "Avaliable";
    text = str.fontcolor("green");
    x = true;
  } else {
    str = "Not Avaliable";
    text = str.fontcolor("red");
    y = false;
  }

  var elems = Array.from(document.querySelectorAll('.demo'));
  for (const elems1 of elems) {
    elems1.innerHTML = text;
    break;
  }
}

<p id="demo1" class="demo"></p>
<p id="demo2" class="demo"></p>
<p id="demo3" class="demo"></p>

Answer 1

只需在for循环中移动随机数的生成并删除break语句（我将0.9降低为0.5以得到更好的评估）

var myVar = setInterval(breakdown, 2000);

function breakdown() {

  let elems = Array.from(document.querySelectorAll('.demo'));
  for (const elems1 of elems) {
    let d = Math.random();

    if (d < 0.50) {
      let str = "Avaliable";
      text = str.fontcolor("green");
      x = true;
    } else {
      let str = "Not Avaliable";
      text = str.fontcolor("red");
      y = false;
    }
    elems1.innerHTML = text;
  }
  
}

<p id="demo1" class="demo"></p>
<p id="demo2" class="demo"></p>
<p id="demo3" class="demo"></p>

Answer 2

您的“ break”语句使循环仅在第一个元素上迭代后结束。

此外，如果要独立更新每个元素，则需要创建一个函数来生成文本，然后分别在每个元素上调用它，如下面的示例所示。

var myVar = setInterval(breakdown, 1000);

function breakdown(){
    var demos = document.querySelectorAll('.demo');
  Array.from(demos).forEach(x => {
    x.innerHTML = getText();
  })
}

function getText(){
    var rand = Math.random();
  if (rand > .9) {
    return "Available";
  } else {
    return "Not Available"
  }
}

这是工作的JSFiddle代码：https://jsfiddle.net/4whxv5q3/ 由此，您应该能够为文本着色或进行所需的任何修改。

Answer 3

循环中的break使它在循环所有元素之前退出。我将循环移动到了函数顶部，看到了您的注释（“可用”，“不可用”，“不可用”）。不需要调用Array.from。

我建议使用其他循环功能，例如forEach。

var myVar = setInterval(breakdown, 2000);

function breakdown() {
	
  var elems = document.querySelectorAll('.demo');
  for (const elem of elems) {
  
    var d = Math.random();

    if (d < 0.90) {
      str = "Avaliable";
      text = str.fontcolor("green");
      x = true;
    } else {
      str = "Not Avaliable";
      text = str.fontcolor("red");
      y = false;
    }

    elem.innerHTML = text;
  }
}

<p id="demo1" class="demo"></p>
<p id="demo2" class="demo"></p>
<p id="demo3" class="demo"></p>

如何将我的功能应用于多个元素？

3 个答案: