javascript-objects 相关问题

我想按元素 id 循环访问多个 div 元素，并使用 setTimeout 来切换类。让我举例说明：例如，采用两个正方形和一个按钮：我想按元素 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 参考以下代码： 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>

javascript arrays javascript-objects

回答 1 投票 0

将 jason 文件中的数据分配给 fetch() 之外的数组，以便使用用户输入来过滤 jason 文件数据[重复]

我有一个 json 文件，其结构如下所示： {“X”：[ { “ID”：“2”， "Titolo":"2-bando internazionalizzazione Marche - 第一学期

javascript arrays json javascript-objects fetch-api

回答 1 投票 0

JavaScript 代码在弹出窗口中运行，但不在我正在浏览的网站上运行

所以我正在构建一个函数来更改我正在浏览的网站的背景颜色，但是当我单击更改颜色按钮时，它只会更改 popup.html 的背景颜色，没有...

javascript google-chrome-extension javascript-objects manifest.json

回答 1 投票 0

如何从函数中提取对象？

是否可以使用 JavaScript 从函数中提取对象？我在对象内部收到的函数： function item(){ 让产品 = { 名称: 名称, 价格: 价格 } } 我想提取