Docent.querySelectorAll()仅获取最后<li>项

我希望使用.glitch类存储所有项目的原始文本。因此,我使用document.querySelectorAll()获取所有这些项,但只存储最后<;li>;项。

HTML:

<nav id="nav-bar" class="nav-bar">
        <ul>
            <li id="1" class="focusable glitch">Home</li>
            <li id="2" class="focusable glitch">Projects</li>
            <li id="3" class="focusable glitch">Contact</li>
        </ul>
    </nav>

js:

document.querySelectorAll('.glitch').forEach(item => {
    originalTexts[item] = item.innerHTML;
});

我在其中保存文本的字典(我又添加了两个条目,看它是否能得到它们):

[object HTMLHeadingElement]: " Example Header"
[object HTMLLIElement]: "Contact"
[object HTMLParagraphElement]: "Example Paragraph"

如您所见,它只存储一个HTMLLIElement。如何将它们全部存储?


解决方案

该行:

originalTexts[item] = item.innerHTML;

item隐式转换为字符串,然后为结果属性赋值。所有li项的字符串将是相同的:"[object HTMLLIElement]"。因此,第二个循环迭代向前覆盖前一个循环迭代的值。

您需要使用唯一标识符。要做到这一点,一种方法是将回调接收的索引作为第二个参数与字符串结合使用(或者,如果li都有ID,就像您的一样,这将是可行的),但我想我会选择其他字符串作为名称的基础。

示例(但同样,我会选择其他字符串,而不是隐式将item转换为字符串):

document.querySelectorAll('.glitch').forEach((item, index) => {
    originalTexts[`${item}_${index}`] = item.innerHTML;
});

实时拷贝:

const originalTexts = {};
document.querySelectorAll('.glitch').forEach((item, index) => {
    originalTexts[`${item}_${index}`] = item.innerHTML;
});
console.log(originalTexts);
<nav id="nav-bar" class="nav-bar">
    <ul>
        <li id="1" class="focusable glitch">Home</li>
        <li id="2" class="focusable glitch">Projects</li>
        <li id="3" class="focusable glitch">Contact</li>
    </ul>
</nav>

相关文章