Javascript 。单击“函数不使用参数，但不使用参数”

我有一个正在工作的功能：

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

---

解决方案：在传递函数时使用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）

调用具有正确的上下文。其他参数是预填充函数其余参数的地方

---

希望这有帮助

您可以使用click event的回调函数调用另一个带参数的函数

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

---

因为你在打电话，所以没用

onFilterCLick（arrOutput，arrfefiture）

in

$（“#buttfiture”）。单击（onFilterCLick（arrOutput，arrfiture））
未将
onFilterCLick
作为click事件的处理程序传递。
如果在DOM准备就绪后生成#buttfearture

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
，如果您想选择与您单击的相同元素

更新
我已经更新了示例，很抱歉没有测试代码，下面是
也请阅读以更好地理解；）

这也会起作用

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

我希望这会对您有所帮助。
我建议您在函数定义中不使用
$（this）
时，使用@JonathanBrooks描述的
.bind（null，func_参数）
方法，因为
将引用
窗口
对象

但是，如果您希望将上下文选择为“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);
});

并对单击事件使用匿名函数，如下所示：

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”）。单击（函数（）{onFilterCLick（arOutput，arrFurniture）}）@Tushar我不确定你的观点。这解决了OPs问题，比在匿名函数（IMO）中包装命名函数调用更简洁@Rorymcrossan这比使用匿名函数更难阅读和理解。@Jonathan您注意到OP在onFilterCLick函数中使用$（This）了吗？这就是OP遇到问题的原因。@Jonathan为什么要使用$（“#buttFurniture”）相反，你可以传递一个参数，然后用它来引用这个。。。怎么样
onFilterCLick.bind（this，arrOutput，arrfefiture）
并且在函数内部使用
$（this）
@BhojendraNepal它不起作用，因为在该范围内，
this
引用了窗口对象。我将其编辑为再次显式调用正确的元素。现在全部完成是的，在没有点击的情况下，按钮会运行2次。实际上，在控制台上，一切都很正常，但不会运行all@murlocTushar在评论中给出了答案好吧，这不起作用，这不是问题。。好吧，我只需要绕一圈就可以了。过滤点击将是未定义的。你测试了你的代码吗？这不管用。这会抛出一个错误
undefined
我已经更新了我的答案，现在这个示例应该可以运行了。