如何将each函数中获取的数组传递到click函数中？

问题根源 #

你在click回调函数里声明了arr_color参数，这会遮蔽外部each作用域中的同名变量。因为jQuery的点击事件回调默认第一个参数是事件对象（Event），所以你打印的arr_color其实是事件对象，而非你定义的数组。

解决方案 #

方案1：利用闭包直接访问外部变量 #

去掉click回调里的arr_color参数，让回调函数直接访问each作用域中的变量（闭包会保留这个作用域）：

$('.menu-colors_page > span').each(function () {
    var arr_color = [];
    arr_color.push($(this).attr('class'));

    $(this).click(function () { // 移除arr_color参数
         console.log(arr_color);
    });
});

方案2：简化变量（可选） #

因为你这里只往数组里存了一个元素，完全可以不用数组，直接存字符串更简洁：

$('.menu-colors_page > span').each(function () {
    var colorClass = $(this).attr('class');

    $(this).click(function () {
         console.log(colorClass);
    });
});

方案3：显式绑定参数（复杂场景适用） #

如果需要显式传递参数，可以用Function.prototype.bind()绑定参数，这种方式适合需要传递多个参数或改变上下文的场景：

$('.menu-colors_page > span').each(function () {
    var arr_color = [$(this).attr('class')];

    $(this).click(function (arr) {
         console.log(arr);
    }.bind(null, arr_color)); // 将arr_color作为第一个参数传入回调
});

原理说明 #

each循环的每一次迭代都会创建一个独立的作用域，回调函数（click事件处理函数）会通过闭包“记住”这个作用域里的变量，所以点击不同的span时，会访问到对应迭代时的变量值。

内容的提问来源于stack exchange，提问作者Nguyễn Triệu Cẩn