如何通过 classList.toggle 使用带有键：值对的对象数组作为 HTML 元素 id？

Question

我想按元素 id 循环访问多个 div 元素，并使用 setTimeout 来切换类。让我举例说明：

例如，取两个方块和一个按钮：

    <div id="step1" class="steps"></div>
    <div id="step2" class="steps"></div>
    <button id="btn1">example one</button>

    .steps {
      height: 50px;
      width: 50px;
      border: 1px solid black;
    }

在讨论这个问题之前，让我分享一个有效的例子。在这种情况下，按“btn1”会短暂地以红色突出显示顶部方块，然后以蓝色突出显示。这是JS：

    const step1 = document.getElementById('step1');
    const step2 = document.getElementById('step2');
    const btn = document.getElementById('btn');
    const exampleOneData = [
      {color: "blue", delay: "1000"},
      {color: "red", delay: "2000"}
    ]

    btn1.addEventListener('click', () => {
      workingExampleData.forEach((obj) => {
        setTimeout(
          () => {
            step1.style.backgroundColor = obj.color}, obj.delay);
        });
    });

它基本上使用 forEach() 来处理数组并在超时内调整样式。这看起来效果很好。

现在，我遇到的困难是使用数组对象来切换元素 ID。我想要做的是使用对象数组来循环不同的方块。为此，我添加了第二个按钮和一个不同颜色的 CSS 类：

    const btn2 = document.getElementById('btn2');

     .red {
       background-color: red;
     }

然后在 Javascript 中添加一个新的对象数组。在此数组中，我使用对象，其中第一个键/值对表示 HTML 元素 id，第二个键/值对表示 setTimout 延迟，如前所述：

    const exampleTwoData = [
      {step: "step1", delay: "1000"},
      {step: "step2", delay: "2000"}
    ];

    btn2.addEventListener('click', () => {
      exampleTwoData.forEach((obj) => {
        setTimeout(
          () => {
            obj.step.classList.toggle('red')}, obj.delay)
        });
     });

但问题是我似乎无法使用

的语法

`obj.step.classList.toggle('red')`

在循环中 obj.step 应该是first = "step1"，然后是"step2"。

所以问题是 - 如果我有一个带有存储 HTML 元素 id 的对象的数组，那么如何将其用作 element.classList.toggle() 上的元素值？

在代码笔中：https://codepen.io/dearstalexander/pen/vYwBxgp

Answer 1

参考以下代码：

  const btn2 = document.getElementById('btn2');

  const exampleTwoData = [
    { step: "step1", delay: 1000 },
    { step: "step2", delay: 2000 }
  ];

  btn2.addEventListener('click', () => {
    exampleTwoData.forEach((obj) => {
      setTimeout(() => {
        const stepElement = document.getElementById(obj.step);
        stepElement.classList.toggle('red'); // Take the element and toggle
      }, obj.delay);
    });
  });

<div id="step1" class="steps"></div>
<div id="step2" class="steps"></div>
<button id="btn2">example two</button>

<style>
  .steps {
    height: 50px;
    width: 50px;
    border: 1px solid black;
  }

  .red {
    background-color: red;
  }
</style>