0

1)#pin_pointがホバーしているとき、2 つの絶対位置の画像を fadeToggle に設定して、フェード効果で変化するようにします。

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

2)#pin_pointがクリックされると、pin_pointimgを「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いるのは、名前付きの関数式です。その名前は他のコードで使用できるとは想定されていないため、関数宣言にする必要があります。

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 に答える
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、 andを使用できます。off

デモ

于 2013-10-16T21:36:36.763 に答える