如何精简带有编号ID/类名的JavaScript重复代码？

我的代码功能正常，但每次新增列表项时都必须添加对应编号的函数，这让我觉得十分繁琐。我想知道是否有JavaScript技巧可以替代这种重复编写代码的方式，以下是两段示例代码：

第一段示例代码 #

$(document).ready(function () {

    $(".btn-slide_1").click(function () {
        $("#panel_1").animate({
            width: 'toggle'
        });
        $(this).toggleClass("active");
        return false;
    });

    $(".btn-slide_2").click(function () {
        $("#panel_2").animate({
            width: 'toggle'
        });
        $(this).toggleClass("active");
        return false;
    });

    $(".btn-slide_3").click(function () {
        $("#panel_3").animate({
            width: 'toggle'
        });
        $(this).toggleClass("active");
        return false;
    });
    // ... 此处省略编号4到18的重复代码
    $(".btn-slide_18").click(function () {
        $("#panel_18").animate({
            width: 'toggle'
        });
        $(this).toggleClass("active");
        return false;
    });

});

第二段示例代码 #

var isAboutToggled = false;


$(document).ready(function () {

    $(".btn-slide-1").click(function () {
        $("#panel-1").animate({
            width: 'toggle'
        });
        $(this).toggleClass("active");
        return false;
    });
});

$(document).ready(function () {
    $(".btn-slide-2").click(function () {
        $("#panel-2").animate({
            width: 'toggle'
        });
        $(this).toggleClass("active");
        return false;
    });
});

// ... 此处省略编号3到18的按钮点击代码

$(document).ready(function () {
    $("#panel-1").click(function () {
        $("#panel-1").animate({
            width: 'toggle'
        });
    });
});

$(document).ready(function () {
    $(this).toggleClass("hide");
    return false;
});

// ... 此处省略编号4到18的面板点击及toggleClass代码

$(document).ready(function () {
    $("#panel-18").click(function () {
        $("#panel-18").animate({
            width: 'toggle'
        });
    });
});

$(document).ready(function () {
    $(this).toggleClass("hide");
    return false;
});

1. 用数据属性关联元素，消除编号依赖 #

修改HTML结构，给所有按钮加通用类btn-slide，通过data-panel属性绑定对应面板的ID；给所有面板加通用类slide-panel：

<button class="btn-slide" data-panel="#panel-1">切换面板1</button>
<div id="panel-1" class="slide-panel">面板1内容</div>

<button class="btn-slide" data-panel="#panel-2">切换面板2</button>
<div id="panel-2" class="slide-panel">面板2内容</div>

2. 统一事件处理逻辑 #

只需要写一次事件绑定，就能覆盖所有按钮和面板的交互：

$(document).ready(function() {
    // 按钮点击切换面板
    $(".btn-slide").click(function(e) {
        e.preventDefault();
        const targetPanel = $(this).data("panel");
        $(targetPanel).animate({ width: "toggle" });
        $(this).toggleClass("active");
    });

    // 面板自身点击切换
    $(".slide-panel").click(function() {
        $(this).animate({ width: "toggle" });
        // 同步对应按钮的激活状态
        const relatedBtn = $(`.btn-slide[data-panel="#${this.id}"]`);
        if (relatedBtn.length) relatedBtn.toggleClass("active");
    });
});

3. 清理无效代码 #

第二段代码中单独的$(document).ready(function(){ $(this).toggleClass("hide"); return false; });完全无效（this指向document，没有实际意义），直接删除即可。如果需要给面板添加hide类，可在初始化或切换逻辑中统一处理。

最终效果 #

新增面板时，只需要添加对应的按钮和面板HTML，无需修改JavaScript代码，彻底解决重复编写函数的问题。

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