jQuery多组横向图片滚动器仅第二个实例生效如何解决

问题根本原因 #

你定义了两个同名的全局scroll函数，JavaScript中后定义的全局函数会覆盖先定义的，所以第一组按钮触发的其实是第二个针对.data_preview_area2的scroll函数，找不到对应元素自然无法生效。

最优解决方案（推荐） #

建议复用逻辑，无需写两套重复代码，只需要统一类名规则即可，后续新增滚动组也不需要修改JS代码：

1. 先调整HTML结构类名：给每组滚动组件外层套一个统一类名scroller-wrapper，每组内部的按钮统一命名为previous_button、next_button，滚动区域统一命名为data_preview_area，无需带1、2后缀。
2. 替换原有所有JS代码为以下通用版本：

window.addEventListener("load" , function (){
    $(".previous_button").on("click",function(){
        scroll(this,false); 
    });
    $(".next_button").on("click",function(){ 
        scroll(this,true); 
    });
}, false);
    
function scroll(elem,next){
    let target  = $(elem).siblings(".data_preview_area");
    let width   = target.outerWidth();
    next ? 
        target.animate({ scrollLeft:"+=" + width } ,300) : 
        target.animate({ scrollLeft:"-=" + width } ,300);
}

快速修复方案（无需修改现有HTML类名） #

如果不想调整现有HTML的类名规则，只需要把两个scroll函数改成不同名称，对应事件绑定处调用对应名称的函数即可：

// 第一组滚动器代码
window.addEventListener("load" , function (){
    $(".previous_button1").on("click",function(){
        scroll1(this,false); 
    });
    $(".next_button1").on("click",function(){ 
        scroll1(this,true); 
    });
}, false);
    
function scroll1(elem,next){
    let target  = $(elem).siblings(".data_preview_area1");
    let width   = target.outerWidth();
    next ? 
        target.animate({ scrollLeft:"+=" + width } ,300) : 
        target.animate({ scrollLeft:"-=" + width } ,300);
}

// 第二组滚动器代码
window.addEventListener("load" , function (){
    $(".previous_button2").on("click",function(){ 
        scroll2(this,false); 
    });
    $(".next_button2").on("click",function(){ 
        scroll2(this,true); 
    });
}, false);
    
function scroll2(elem,next){
    let target  = $(elem).siblings(".data_preview_area2");
    let width   = target.outerWidth();
    next ? 
        target.animate({ scrollLeft:"+=" + width } ,300) : 
        target.animate({ scrollLeft:"-=" + width } ,300);
}

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