0

リストといくつかのサムネイルを含むページがあります。ページがロードされたときの各liの (簡略化された) html:

<a class="img" href="http://exemple.com">
   <img src="http://exemple.jpg" onmouseover="startFlipBook(...);" onmouseout="endFlipBook(...);">
</a>

そのページには、「編集」ボタンがあります。そのボタンをクリックすると、jquery UI の並べ替え可能なプラグインが読み込まれます (したがって、ユーザーはリストを並べ替えることができます)。JavaScriptを使用して、画像のマウスオーバーとマウスアウトを削除します。また、すべての a hrefのクリックを無効にします。そうです：

$("#edit").click(function() {
    $( "img" ).removeAttr('onmouseover').removeAttr('onmouseout');
    $( "a, .wrap" ).css('cursor','move');
    $( "a").click(function(){return false;});
});

これまでのところ、それは私が望むように機能しています (ただし、それが最善の方法であるかどうかはわかりません)。

さて、編集モードでは、「キャンセル」ボタンがあります。そのボタンを押すと、画像のマウスオーバーとマウスアウトが元に戻り、リンクが再び機能する必要があります。

これは、私のコードが機能していない場所です。そうです ：

$("#cancel").click(function() {
    //No idea how I can get back my initial mouseover and mouseout with the correct parameter        
    $( "a, .wrap" ).css('cursor','auto');
    $( "a" ).click(function(){return true;});
});

リンクはクリックできないままで、カーソルが間違っていて、マウスオーバーイベントを元に戻す方法がわかりません。

何か助けてください。

4

2 に答える 2

1

すべての「a」HTML要素からonmouseoverand属性をクリアする必要があります。onmouseout

<a class="img" href="http://example.com">
    <img src="http://example.jpg">
</a>

スクリプトでは、次のソリューションを使用できます。

$(document).ready(function(){
    // Add mouseenter and mouseleave event listener 
    $("a.img")
        .mouseenter(function(){ startFlipBook(...); })
        .mouseleave(function(){ endFlipBook(...); });

    // When click on Edit button
    $("#edit").click(function(){

        // Remove the mouseenter and mouseleave event listener
        $("a.img").unbind("mouseenter").unbind("mouseleave");
        $("a, .wrap").css('cursor','move');
        $("a").click(function(){return false;});
    });

    // When click on Cancel button
    $("#cancel").click(function() {

        // Add mouseenter and mouseleave event listener
        $("a.img")
            .mouseenter(function(){ startFlipBook(...); })
            .mouseleave(function(){ endFlipBook(...); });
        $( "a, .wrap" ).css('cursor','auto');
        // Remove the click event listener
        $( "a" ).unbind("click");
    });
});

私が上で書いたことであるjQuery関数についてもっと読むことができます：

unbind ：イベントリスナーを削除します
mouseenter：マウスがエリアに入るときにイベントリスナーを追加します
mouseleave：マウスがエリアを離れるときにイベントリスナーを追加します

于 2012-11-05T18:46:18.263 に答える
1

あなたの「キャンセル」クリック機能で...

$('a').unbind('click');

これにより、false を返すクリック関数のバインドが解除されます (リンクが無効になります)。

于 2012-11-05T17:54:12.637 に答える