如何在JavaScript中避免重复代码？jQuery前缀类/ID场景优化

方法1：提取通用逻辑+循环绑定 #

把重复的点击处理逻辑抽成独立函数，然后遍历前缀列表批量绑定事件，后续再加其他前缀（比如draft-）也只需要在数组里追加项即可：

function onSelectAddress() {
    // 定义通用处理函数，接收前缀参数
    function handleAddressClick(prefix) {
        $(`#${prefix}-address`).on('click', function() {
            $(`#${prefix}-dropdown`).show();
            $(this).addClass('box-click');
        });
    }

    // 遍历需要处理的前缀列表
    ['receive', 'send'].forEach(prefix => {
        handleAddressClick(prefix);
    });
}

方法2：利用属性选择器动态匹配 #

如果元素命名严格遵循{prefix}-address和{prefix}-dropdown的规则，可以用jQuery的属性结尾选择器匹配所有目标元素，在事件回调里自动提取前缀，实现一次绑定搞定所有场景：

function onSelectAddress() {
    // 匹配所有ID以"-address"结尾的元素
    $('[id$="-address"]').on('click', function() {
        // 从当前元素ID中提取前缀（比如"receive-address"取到"receive"）
        const prefix = this.id.split('-')[0];
        // 对应显示下拉框并添加样式
        $(`#${prefix}-dropdown`).show();
        $(this).addClass('box-click');
    });
}

补充说明 #

• 方法1更可控，适合前缀数量固定、需要明确指定的场景；
• 方法2更灵活，后续新增同规则的前缀元素不需要修改JS代码，会自动生效；
• 如果页面存在不符合命名规则的元素，方法2可能误匹配，建议给所有地址元素统一加个类（比如address-trigger），把选择器改成'.address-trigger[id$="-address"]'来缩小范围。

内容的提问来源于stack exchange，提问作者Stern