jQuery点击事件多选择器失效，使用.merge()仅前两个选择器生效

嘿，我来帮你搞定这个问题！你遇到的核心问题是**$.merge()方法只能接受两个参数**，第三个参数会被直接忽略，所以你的代码里只有infoTag和navLink被合并到了一起，sideIco根本没被加入到事件绑定的集合里，这就是为什么只有前两个选择器生效的原因。

正确的解决方案有两种，选哪种都可以： #

方案1：直接用jQuery多选择器一次性获取所有元素

这是最简洁的方式，jQuery原生支持逗号分隔的多选择器，直接把三个选择器写在同一个$()里就行：

// 一次性获取所有需要绑定点击事件的元素
var allScrollLinks = $("#carbonNavbar ul li a[href^='#'], #sideIcons a[href^='#'], a.scrl[href^='#']");

allScrollLinks.on('click', function(e) {
    e.preventDefault();
    var hash = this.hash;
    $('html, body').animate({
        scrollTop: $(hash).offset().top
    }, 1000, function(){
        // 完成动画后添加哈希到URL
        window.location.hash = hash;
    });
});

方案2：用.add()方法链式合并多个元素集合

如果你需要分开定义每个元素集合，就用jQuery的.add()方法，它可以链式添加多个集合，比$.merge()更适合处理多个集合的合并：

var navLink = $("#carbonNavbar ul li a[href^='#']");
var sideIco = $("#sideIcons a[href^='#']");
var infoTag = $("a.scrl[href^='#']");

// 链式.add()合并所有集合
var allScrollLinks = infoTag.add(navLink).add(sideIco);

allScrollLinks.on('click', function(e) {
    e.preventDefault();
    var hash = this.hash;
    $('html, body').animate({
        scrollTop: $(hash).offset().top
    }, 1000, function(){
        window.location.hash = hash;
    });
});

补充说明：为什么$.merge()不行？ #

$.merge()的官方语法是$.merge(first, second)，它的作用是把第二个数组/元素集合合并到第一个里面，只接受两个参数。你传了三个参数的话，第三个会被完全忽略，所以sideIco并没有被合并到最终的集合里，自然不会触发点击事件。

这样修改后，三个选择器对应的元素就都会正常触发点击滚动的逻辑啦！

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