为何点击事件仅对首个dedicate__wrapper生效？求解决方法

DevOps 小满

2026-7-29

问题分析与解决思路

你的问题核心在于事件回调里的元素获取逻辑错误：document.querySelector(".dedicate__wrapper")只会返回第一个匹配的DOM元素，所以无论你点击第二个.dedicate__wrapper，代码里始终在判断第一个元素的step1类，而非当前触发点击的那个元素。

解决步骤

1. 替换当前点击元素的获取方式

在jQuery的事件回调函数中，this指向的就是当前被点击的.dedicate__wrapper元素，直接用它来判断类名即可，不需要重新查询DOM。

2. 修正后的代码示例

原生DOM API写法

$(document).ready(function() {
    $(".dedicate__wrapper").on('click', function() {
        // 用this获取当前点击的元素
        var el2 = this;
        var el3 = document.querySelector(".config_submit");

        if (el2.classList.contains('step1')) {
            el3.classList.remove('disable');
        } else {
            el3.classList.add('disable');
        }
    });
});

全jQuery写法（更简洁）

$(document).ready(function() {
    // 提前获取config_submit元素，避免每次点击重复查询
    const $submit = $(".config_submit");
    
    $(".dedicate__wrapper").on('click', function() {
        const $current = $(this);
        if ($current.hasClass('step1')) {
            $submit.removeClass('disable');
        } else {
            $submit.addClass('disable');
        }
    });
});