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

.click function working without arguments, but not working with arguments

本文关键字：参数 工作 函数 click 情况下      更新时间：2023-09-26

我有一个正在工作的函数：

$('#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");
    }
}

解决方案：在传递函数时使用绑定来分配参数：

 $('#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)调用就有了正确的上下文。其他参数是预填充函数其余参数的地方。

希望这能有所帮助！

您可以使用click事件的回调函数来调用另一个带参数的函数。

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

当您不在函数定义中使用$(this)时，我建议使用@JonathanBrooks描述的.bind(null,func_arguments)方法，因为this将引用window对象。

然而，如果你想将上下文选择为"this"，那么我建议你这样使用：

function onFilterCLick(elem,arrFull,arrCurrent) {
  //now you can use elem to refer $(this)
  elem.css("background-color", "#656565");
}

并对点击事件使用匿名功能，如下所示：

$('#buttFurniture').click(function(){
    onFilterCLick($(this),arrOutput,arrFurniture);
});

这里的工作代码示例

它不起作用，因为您正在调用$('#buttFurniture').click(onFilterCLick(arrOutput, arrFurniture));中的onFilterCLick(arrOutput, arrFurniture)不将onFilterCLick作为单击事件的处理程序传递。

如果#buttFurniture是在DOM准备好后生成的

function onFilterCLick(arrOutput, arrFurniture) {
    console.log(arguments);
    console.log($(this));
    $(this).toggleClass('red-border');
};
$('#buttFurniture').on('click', function (evt) {
    evt.preventDefault();
    var holder = onFilterCLick.bind(this); 
    holder('argOne', 'argTwo');
});

若要选择和您单击的元素相同的元素，.bind(this)将覆盖函数范围内的this。

更新

我已经更新了这个例子，很抱歉没有经过测试的代码，这是fidle也可以阅读这篇文章以更好地理解绑定；）

这也会起作用。

var holder = onFilterCLick.bind(this, 'argOne', 'argTwo'); 
holder();

我希望这对你有帮助。

相关文章：