传递 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) 并将其 return 值传递给 one，完全按照 foo(bar()) 调用 bar 并将其 return 值传递给 foo.

由于您立即调用它们，因此您的代码使浏览器崩溃，因为 HideMap 调用 ShowMap，后者调用 HideMap，后者调用 ShowMap...直到您获得 （请打鼓） 堆栈溢出.

如果你想"bake"一个函数的参数，你可以使用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();
}

Answer 2

作为T.J。说，你已经传递了一个 jQuery 对象。所以你可以非常简单地停止尝试将 "element" 变成一个。像这样：

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

但是这个版本仍然会导致浏览器崩溃。所以请继续阅读：

至于你每次添加点击事件showmap/hidemap是干什么的。我认为有更好的方法来做到这一点。您似乎正试图使用相同的元素来显示地图或隐藏地图。我建议这样做：

$(".university .seeMap").on("click",function(){
    toggleMap($(this));
});

function toggleMap(element) {
    if (element.is(":visible")){
        element.next(".university-map").fadeOut();
        element.html('Show The Map &nbsp; <i class="zmdi zmdi-pin"></i>');
    }else {
        element.next(".university-map").fadeIn();
        element.html('Hide The Map &nbsp; <i class="zmdi zmdi-pin"></i>');
    }
}

传递 jquery 选择器作为参数

passing jquery selector as a parameter

javascript

parameters

jquery

function

selector