Question

1）当#pin_point悬停时，我将两个绝对定位的图像设置为fadeToggle，以便它随着淡入淡出效果而变化：

$("#pin_point").hover(function  hoverhandler() {
    $("#pin_point img").fadeToggle('medium');
});

2）点击#pin_point后，我将pin_point img设置为交换为“ex.png”：

$("#pin_point").click(function() {
    $("#pin_point img").attr('src','images/ex.png');
});

3）点击#pin_point后，我也解除了＃1（上面）中悬停功能的绑定。

问题：如果我想在再次点击#pin_point时绑定该函数，我该怎么办？下面是我的代码，我很难搞清楚。有人可以帮忙吗？

$("#pin_point").click(function() {
    $('#pin_point').unbind('hover', hoverhandler);
    $("#pin_point img").attr('src','images/ex.png');
    $('#pin_point').bind('hover', hoverhandler);
});

Answer 1

hover是一个简短的事件。而是取消绑定mousenter和mouseleave。还要将状态信息附加到元素以获得每次单击的替代效果。

function hoverhandler() {
    $("img", this).stop(true, true).fadeToggle('medium');
}
$("#pin_point").hover(hoverhandler);

$("#pin_point").click(function () {
    var $this = $(this),
        enableHover = $this.data('enableHover'), //get the current state
        method = "bind"; //default mathod to bind

    if (!enableHover) {  //if alternate click to disable
         method = "unbind"; //change the method
    } 

    $this[method]('mouseenter mouseleave', hoverhandler); //apply the method
    $this.find("img").prop('src', 'http://placehold.it/40x40');
    $this.data('enableHover', !enableHover);//save the state in the element to toggle between each click

});

如果您使用的是jquery版本＆gt; = 1.7，则可以使用on和off。

<强> Demo

Answer 2

您传递给.hover的内容是named function expression。它的名称不应该对其他代码可用，你必须使它成为一个函数声明：

function hoverhandler() {
    $("#pin_point img").fadeToggle('medium');
}
$("#pin_point").hover(hoverhandler);

根据jQuery documentation：

致电$( selector ).hover( handlerIn, handlerOut )是：
的简写
$( selector ).mouseenter( handlerIn).mouseleave( handlerOut );

所以你可以解开

$("#pin_point").off('mouseenter'. hoverhandler).off('mouseleave', hoverhandler );

绑定和解除绑定功能

2 个答案: