javascript一次获取多个id设置一个函数答案

【问题标题】：javascript get multiple id at once at set a functionjavascript一次获取多个id设置一个函数
【发布时间】：2017-10-09 07:50:21
【问题描述】：

我有这些 div（注释），我需要每个 div 有一个不同的 ID，我已经设法弄清楚如何给他们自己的唯一 ID，但现在我不知道如何获得它们。我可以使用我自己编写 ID 的手动功能来完成，但这不是一个好方法。因此，我正在努力获得 id 'rect'，我在创建一个新的时每增加 1 个。所以 rect0、rect1、rect2 等等。但是我如何在不使用：this function 100times 的情况下获得它们？

function update(jscolor) {
    document.getElementById('rect0').style.backgroundColor = "#" + jscolor;
    document.getElementById('rect1').style.backgroundColor = "#" + jscolor;
    document.getElementById('rect2').style.backgroundColor = "#" + jscolor;
    document.getElementById('rect3').style.backgroundColor = "#" + jscolor;
    document.getElementById('rect4').style.backgroundColor = "#" + jscolor;
    document.getElementById('rect5').style.backgroundColor = "#" + jscolor;
    document.getElementById('rect6').style.backgroundColor = "#" + jscolor;
    document.getElementById('rect7').style.backgroundColor = "#" + jscolor;
    document.getElementById('rect8').style.backgroundColor = "#" + jscolor;
    document.getElementById('rect9').style.backgroundColor = "#" + jscolor;
    document.getElementById('rect10').style.backgroundColor = "#" + jscolor;
    document.getElementById('rect11').style.backgroundColor = "#" + jscolor;
    document.getElementById('rect12').style.backgroundColor = "#" + jscolor;
    document.getElementById('rect13').style.backgroundColor = "#" + jscolor;
    document.getElementById('rect14').style.backgroundColor = "#" + jscolor;
    document.getElementById('rect15').style.backgroundColor = "#" + jscolor;
    document.getElementById('rect16').style.backgroundColor = "#" + jscolor;
    document.getElementById('rect17').style.backgroundColor = "#" + jscolor;
    document.getElementById('rect18').style.backgroundColor = "#" + jscolor;
    document.getElementById('rect19').style.backgroundColor = "#" + jscolor;
}

我试过在哪里得到矩形，然后像使用 ++ 一样递增，但它没有用，所以我希望有人知道一种有效的方法。

【问题讨论】：

请在此处添加代码，或 jsfiddle 链接，以便我们了解。
向您的元素添加一个类并定位该类。
i need each one to have a different ID 这不太可能。使用类或布局结构找出适合 CSS 的目标组。
绝对同意@JethroHazelhurst，这就是大喊“大家好，我们去吃披萨！”的区别。和“嘿简，我们去吃披萨！嘿乔，我们去吃披萨！嘿阿尔伯特，我们去吃披萨！......”
@Hodrobond 我已经尝试过上课，但我不想改变颜色！在这里查看我的代码笔：codepen.io/Qbinx/pen/OmObRg?editors=1010

标签： javascript

【解决方案1】：

这项工作的理想工具是循环：

let numberOfRects = 20;
for (let i = 0; i < numberOfRects; i++) {
  document.getElementById('rect' + i).style.backgroundColor = "#" + jscolor;
}

【讨论】：

【解决方案2】：

var x = document.querySelectorAll("[id^='rect']");
var i;
for (i = 0; i < x.length; i++) {
    x[i].style.backgroundColor = "#" + jscolor;
}

【讨论】：

当我尝试添加代码时，元素消失了？你知道是什么原因造成的吗？检查我的代码笔：codepen.io/Qbinx/pen/OmObRg
给定的笔不包含任何 ID 矩形，我错过了什么
在 createNote 函数中确实如此，但我没有更新整个代码，因此请查看此链接：codepen.io/Qbinx/pen/OmObRg?editors=1010

【解决方案3】：

您可以这样做并且可以更改i 的值限制。仅用于演示，我将其保留为 19，但它可能会有所不同

function update(jscolor) {
  for (var i = 0; i <= 19; i++) {
    document.getElementById('rect' + i).style.backgroundColor = "#" + jscolor;
  }
}

或者你可以使用 className 来做这样的事情

var testElements = document.getElementsByClassName('example')
Array.prototype.filter.call(testElements, function(testElement) {
  testElement.style.backgroundColor = 'red';;
});

<div class="example">First div element with class="example".</div>

<div class="example">Second div element with class="example".</div>

【讨论】：