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

Posted 2023-05-08

【中文标题】javascript一次获取多个id设置一个函数

【英文标题】：javascript get multiple id at once at set a function

【发布时间】：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

【参考方案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>