在 foreach 方法中声明变量 javascript

Question

我是编程新手，正在尝试开发 chrome 扩展。我试图操纵的网站有一个 div 元素，在这个 div 中有多个 div，这些 div 的数量取决于第一个的规模div 且比例尺可由用户拖动。我的问题是，我需要声明这些变量中的每一个，并让突变观察者观察它们的变化。因此，如果一个用户在那里有 8 div，每个 div 都应该被声明为一个变量，并有一个变异观察者观察它。下面是我的代码：

function tester() {
  var child = document.querySelector("#__APP > div > div:nth-child(3) > div > div > div.react-grid-layout.layout > div:nth-child(5) > div > div.css-q57e4p > div > div > div.list-container.css-1kq4s3b > div.list-auto-sizer > div > div");
  var childnodesofchild = [child.childNodes];
  var divs = [];
  console.log(childnodesofchild[0]);
  childnodesofchild[0].forEach(consoler);

  function consoler() {
    //this is the problem
    span1 = document.getElementsByClassName("text right")[0];
    const observer = new MutationObserver(function(mutations) {

      mutations.forEach(function(mutation) {
        var spantext = span1.textContent;
        var spandiv = span1.parentNode;

        if (mutation.addedNodes) {
          if (spantext > avg) {
            spandiv.style.backgroundColor = "#E8E8E8"
            spandiv.style.color = "black";
            spandiv.style.opacity = "0.7";
          }

          if (spantext < avg) {
            spandiv.style.backgroundColor = "black";
            spandiv.style.color = "white";
            spandiv.style.opacity = "1";
          }
        }
      })
    });

    const options = {
      childList: true,
      subtree: true,
      attributes: true,
      characterData: true
    };

    observer.observe(span1, options);
  }
}

Answer 1

我仍然不能 100% 确定您的问题是什么。但在这里，我写了一个简单的示例，说明如何在循环中声明几个 div 并在循环中弄乱其属性。希望对您有所帮助。

let colors = ['red','green','blue'];
let innerText = ['A','B','C'];

for (let i = 0; i < colors.length; i++) {
  let testDiv = document.createElement('div');
  testDiv.className = 'test';
  testDiv.style = 'width: 100px; height: 50px; line-height: 50px; text-align: center; color: white;';
  testDiv.style.backgroundColor = colors[i];
  testDiv.innerHTML = innerText[i];
  document.body.appendChild(testDiv);
}

document.getElementById('testBtn').onclick = function() {
  let testDivs = document.querySelectorAll('.test');

  for (let i = 0; i < testDivs.length; i++) {
    testDivs[i].style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
  }
}

<button id="testBtn">Change Div Colors</button>

在 foreach 方法中声明变量 javascript

declaring variables in a foreach method javascript

javascript

variables

mutation-observers