0

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);
});
4

2 回答 2

0

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 版本 >= 1.7 on，则可以使用。off

演示

于 2013-10-16T21:36:36.763 回答
0

您传递给.hover的是一个命名函数表达式。它的名称不应该对其他代码可用，您必须使其成为函数声明：

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

根据 jQuery文档：

调用$( selector ).hover( handlerIn, handlerOut )是以下的简写：

$( selector ).mouseenter( handlerIn).mouseleave( handlerOut );

所以你可以解除绑定

$("#pin_point").off('mouseenter'. hoverhandler).off('mouseleave', hoverhandler );
于 2013-10-16T21:43:19.430 回答