.click函数在没有参数的情况下工作,但不使用参数

Question

我有这个功能正在工作:

$('#buttFurniture').click(onFilterCLick);

但后来我决定在函数中添加一些参数并停止工作:

$('#buttFurniture').click(onFilterCLick(arrOutput, arrFurniture));

全功能:

function onFilterCLick(arrFull,arrCurrent) {
    $('#buttFurniture').css("background-color", "#F1F1F1");
    $('#buttCars').css("background-color", "#F1F1F1");
    $('#buttGames').css("background-color", "#F1F1F1");
    $('#buttFurniture').css("color", "black");
    $('#buttCars').css("color", "black");
    $('#buttGames').css("color", "black");

    $(this).css("background-color", "#656565");
    $(this).css("color", "white");

    if (jQuery.inArray(arrCurrent[0], arrFull)) {
        console.log("asdasd");
    }
}

Answer 1

解决方案:使用bind在传递函数时分配参数:

 $('#buttFurniture').click(onFilterCLick.bind($('#buttFurniture'), arrOutput, arrFurniture));

说明:在javascript中,函数是所谓的第一类对象 - 这意味着它们可以作为变量传递,如其他基元(数字,布尔等),也可以作为函数的参数.

在这方面,重要的是要注意将函数作为变量传递和调用函数的关键区别.例如,请考虑以下功能:

var myFunc = function () {
    return 0;
} 

现在,请注意这两个陈述之间的区别:

typeof myFunc // "function"
typeof myFunc() // "number"

正如您所看到的,第一个是对函数本身的引用,第二个是对该函数的调用 - 一个微妙但关键的区别.

您的单击处理程序需要一个函数作为它的参数,而不是函数调用(或函数的结果被调用).这就是为什么你必须使用bind:bind允许你传递函数本身,但也让你能够预先填充你传递的函数的参数.

简而言之,bind()函数(在您的情况下)需要3个参数 - 每个bind()函数中的第一个参数是this参数 - 必须设置this所选元素,以便您的$(this)调用具有正确的上下文.其他参数是预先填充函数其余参数的位置.

希望这可以帮助!