将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()) 调用<的方式完全相同/ strong> bar并将其返回值传递给foo。

由于您立即调用它们，您的代码会崩溃浏览器，因为HideMap调用ShowMap调用HideMap来调用ShowMap ...永远直到您得到（请滚筒） 堆栈溢出。

如果你想＆＃34;烘烤＆＃34;函数的参数，您可以使用Function#bind或jQuery自己的$.proxy：

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

或

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

在这两种情况下，他们都会创建一个新功能，在调用时，会调用具有给定this值的原始内容（您未使用this，因此我已经使用了null使用{sup> 1 上方的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(); } ，以便他们希望已经的元素被包装：

  let promise = axios.get('http://localhost:63711/api/AdminAPI/GetHomeCarousel');
  console.log(promise);
  promise.then(function(response){
    console.log(response);
  });

Answer 2

作为T.J.说，你已经传递了一个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();
}

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

关于你每次添加点击事件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>');
    }
}