如何为点击的字体列表项动态更新输入框与标题内容-html教程-PHP中文网

本文详解如何通过事件委托精准获取被点击元素内 h3 和 h3 > span 的文本内容，并分别赋值给同级的和，解决因错误使用 querySelectorAll 返回 NodeList 导致的 undefined 问题。

本文详解如何通过事件委托精准获取被点击 `

` 元素内 `h3` 和 `h3 > span` 的文本内容，并分别赋值给同级的 `` 和 `

`，解决因错误使用 `queryselectorall` 返回 nodelist 导致的 `undefined` 问题。

在原代码中，核心问题在于：

document.querySelectorAll("li > h3") 返回的是 NodeList（类数组），而非单个元素，因此 .textContent 属性不可直接访问（返回 undefined）；
同样，fontListSecondChild.textContent 也因相同原因失效；
此外，event.target 可能是
内任意子节点（如文本节点或
），而 event.target.className 并非总等于
的 class，应改用 event.currentTarget 确保始终指向绑定事件的
元素；
是元素节点，需设置 textContent（而非 value），而才使用 value。

✅ 正确做法是：在点击事件处理器内部，基于当前被点击的

（即 event.currentTarget）动态查询其子元素

，确保上下文准确、数据可得。

以下是优化后的完整脚本逻辑：

HueBit AI

一款AI图像与设计工具，主要用于一站式AI艺术创作工具，适合需要提升相关任务效率的用户。

下载

<script type="text/javascript">
    const fontList = document.querySelectorAll("li");
    const fontApplyMain = document.querySelector("main");
    const fontNameUI = document.getElementById("font-name");
    const fontClassUI = document.getElementById("font-class");

    fontList.forEach((li) => {
        li.addEventListener("click", (event) => {
            // ✅ 安全获取当前 li 内的 h3 和 h3 > span
            const clickedH3 = event.currentTarget.querySelector("h3");
            const clickedSpan = event.currentTarget.querySelector("h3 > span");

            // ✅ 防御性检查：避免因 DOM 结构变动导致脚本报错
            if (!clickedH3 || !clickedSpan) {
                console.warn("Missing h3 or span in clicked list item");
                return;
            }

            // 更新主内容区字体类名
            fontApplyMain.className = "";
            fontApplyMain.classList.add(event.currentTarget.className);

            // ✅ 正确赋值：input 使用 value，h4 使用 textContent
            fontNameUI.value = clickedH3.textContent.trim();
            fontClassUI.textContent = clickedSpan.textContent.trim();

            // ✅ 注意：dialogFonts 未在 HTML 中定义，若存在需确保已初始化
            // if (typeof dialogFonts !== 'undefined' && dialogFonts.close) {
            //     dialogFonts.close();
            // }
        });
    });
</script>

? 关键要点总结：