jQuery多按钮如何复用同一点击事件 避免重复编写代码

不需要为每个按钮重复编写相同的事件逻辑，下面三种方式都可以实现需求，根据你的场景选择即可：

方案1：多选择器一次性绑定（改动最小） #

jQuery支持在同一个选择器里用逗号分隔多个匹配目标，直接把两个ID写在同一个选择器中，只需要写一次事件逻辑就能完成绑定：

$(document).ready(function(){
    // 逗号分隔两个元素ID，一次完成绑定
    $('#depIN, #depIN1').click(function(){
        let network = '';
        if ($('#depsTo').val()){
            network = $('#depsTo').val();
            // 原代码中networkDesign、i、temp都没有变量声明，会污染全局作用域，这里补全声明避免隐性bug
            let networkDesign = "";
            let temp;
            for (let i=0;i<network.length;i++){
                temp = "<span style = 'border:3px dotted #399bff;'>" + network[i] + "</span>";
                if (i !== network.length-1){
                    temp += "<bold style = 'color : #d77300;'> <i class='fa fa-long-arrow-right'></i></bold>"
                }
                network[i] = temp;
            }
            network = network.toString().replaceAll(',','');
            $('#networkHeading').html(network);
        }
    });
});

方案2：公共类选择器绑定（扩展性最好） #

如果后续还要新增更多触发相同逻辑的按钮，每次追加ID会比较繁琐，可以给所有需要触发该逻辑的按钮加一个统一的功能类，用类选择器完成绑定：
首先修改按钮HTML，添加专属功能类，比如dep-trigger：

<a name="depIN" id="depIN" class="btn btn-primary dep-trigger" type="button"></a>
<a name="depIN1" id="depIN1" class="btn btn-primary dep-trigger" type="button"></a>

之后JS直接选择该类绑定即可，后续新增同逻辑按钮只需要加上dep-trigger类，不需要修改JS代码：

$(document).ready(function(){
    $('.dep-trigger').click(function(){
        // 内部逻辑和方案1完全一致即可
        let network = '';
        if ($('#depsTo').val()){
            network = $('#depsTo').val();
            let networkDesign = "";
            let temp;
            for (let i=0;i<network.length;i++){
                temp = "<span style = 'border:3px dotted #399bff;'>" + network[i] + "</span>";
                if (i !== network.length-1){
                    temp += "<bold style = 'color : #d77300;'> <i class='fa fa-long-arrow-right'></i></bold>"
                }
                network[i] = temp;
            }
            network = network.toString().replaceAll(',','');
            $('#networkHeading').html(network);
        }
    });
});

方案3：抽离公共函数（适合多场景复用） #

如果这段处理逻辑除了按钮点击之外，还要在页面初始化、其他交互触发等场景调用，可以把逻辑单独抽成独立函数，两个按钮点击时直接调用该函数即可：

// 抽离公共处理逻辑为独立函数
function renderNetworkPath() {
    let network = '';
    if ($('#depsTo').val()){
        network = $('#depsTo').val();
        let networkDesign = "";
        let temp;
        for (let i=0;i<network.length;i++){
            temp = "<span style = 'border:3px dotted #399bff;'>" + network[i] + "</span>";
            if (i !== network.length-1){
                temp += "<bold style = 'color : #d77300;'> <i class='fa fa-long-arrow-right'></i></bold>"
            }
            network[i] = temp;
        }
        network = network.toString().replaceAll(',','');
        $('#networkHeading').html(network);
    }
}

$(document).ready(function(){
    // 两个按钮点击都调用同一个函数
    $('#depIN').click(renderNetworkPath);
    $('#depIN1').click(renderNetworkPath);
    // 其他场景需要触发逻辑时，直接调用 renderNetworkPath() 即可
});

小提示：初学者很容易忽略变量声明，你原代码中循环变量i、临时变量temp、networkDesign都没有用let/const声明，会默认挂载到全局对象上，在复杂页面中很容易和其他逻辑冲突产生难以排查的bug，建议养成所有变量先声明再使用的习惯。

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