如何在引号内使用元素属性？实现按钮跳转对应ID命名HTML页面

云原生阿岚

2026-8-12

解决方案

你的代码目前存在两个核心问题：

document.querySelector('.submit')只会选中第一个带.submit类的按钮，其余按钮点击不会触发跳转逻辑
跳转路径写死为id.html，没有关联按钮的实际ID

以下是两种可行的实现方案：

方案1：遍历所有按钮绑定事件（适合固定数量的按钮）

document.addEventListener('DOMContentLoaded', function() {
    // 获取所有带.submit类的按钮
    const buttons = document.querySelectorAll('.submit');
    // 给每个按钮绑定点击事件
    buttons.forEach(button => {
        button.addEventListener('click', function() {
            // 用当前按钮的ID拼接目标页面路径
            location.href = `${this.id}.html`;
        });
    });
});

方案2：事件委托（更高效，支持动态添加按钮）

如果按钮是动态生成的，或者页面中按钮数量较多，推荐用事件委托——只给父容器绑定一次事件即可：

<!-- 假设所有按钮都放在这个父容器内 -->
<div id="btn-wrapper">
    <button class="submit" id="a">跳转到A页面</button>
    <button class="submit" id="b">跳转到B页面</button>
</div>

document.addEventListener('DOMContentLoaded', function() {
    const btnWrapper = document.getElementById('btn-wrapper');
    btnWrapper.addEventListener('click', function(e) {
        // 判断点击的元素是否是目标按钮
        if (e.target.classList.contains('submit')) {
            // 用按钮ID拼接路径并跳转
            location.href = `${e.target.id}.html`;
        }
    });
});