javascript - 将 jquery 选择器作为参数传递

Question

我想将 jquery 选择器传递给函数，但它不起作用，问题是什么？

$(".university .seeMap").one("click",function(){
    HideMap($(this));
});
function ShowMap(element){
    $(element).html('See The Map &nbsp; <i class="zmdi zmdi-pin"></i>');
    $(element).one("click",HideMap(element));
    $(element).next(".university-map").fadeOutn();
}
function HideMap(element){
    $(element).html('Hide The Map &nbsp; <i class="zmdi zmdi-pin"></i>');
    $(element).one("click",ShowMap(element));
    $(element).next(".university-map").fadeIn();
}

Answer 1

您传递的不是一个选择器，而是一个 jQuery 实例。

问题是 $(element).one("click",ShowMap(element)); 调用 ShowMap(element)并将其返回值传递给 one，与 foo(bar()) 调用 bar 并传递其返回值的方式完全相同将值返回到 foo 中。

由于您立即调用它们，您的代码会使浏览器崩溃，因为 HideMap 调用 ShowMap，而 ShowMap 又调用 HideMap，而 HideMap 又调用 ShowMap ...永远，直到你遇到(请击鼓)堆栈溢出。

如果你想将参数“烘焙”到函数中，你可以使用Function#bind或jQuery自己的$.proxy:

$(element).one("click",HideMap.bind(null, element));
// ---------------------------^^^^^^^^^^^^

或

$(element).one("click",$.proxy(HideMap, null, element));
// --------------------^^^^^^^^^^^^^^^^^^^^^^

在这两种情况下，它们都会创建一个新函数，在调用该函数时，将使用给定的 this 值调用原始函数(您没有使用 this，所以我上面使用了 null¹)以及您提供给 bind/proxy 的任何参数。

---

¹ 当您使用 null 作为 thisArg 参数时，该函数将使用 null 调用(在严格模式下)或引用全局对象(在松散模式下)。

---

旁注:您反复重新包装该元素，无缘无故地一遍又一遍地通过 $() 运行它。这是无害的，但没有意义。

相反，我建议编写 ShowMap 和 HideMap，以便它们期望元素已经被包装:

$(".university .seeMap").one("click",function(){
    HideMap($(this));
});
function ShowMap(element){
    element.html('See The Map &nbsp; <i class="zmdi zmdi-pin"></i>');
    element.one("click",HideMap.bind(null, element));
    element.next(".university-map").fadeOutn();
}
function HideMap(element){
    element.html('Hide The Map &nbsp; <i class="zmdi zmdi-pin"></i>');
    element.one("click",ShowMap.bind(null, element));
    element.next(".university-map").fadeIn();
}