0

選択範囲に作用する関数があります（引数「sel」によって渡されます）。選択範囲内の項目にマウスを合わせると、同じ選択範囲内の別の要素（'.extLink'）がアニメーション化されます。関数は次のとおりです。

function animo(sel) { 
    sel.hover(      
        function () {       
            $('.extLink').stop().animate({right: '-5px'}, 'fast');      
        },          
        function () {       
            $('.extLink').stop().animate({right: '0'}, 'fast');         
        }       
    );  
}

ページの特定の要素をクリックすると、選択が変わります。ただし、選択が正しく変更されたにもかかわらず、以前の選択の一部であったアイテムでも関数が引き続き機能することがあります。つまり、これらのアイテムを渡すと、.extLinkがアニメーション化されます。

私はいくつかのテストを行い、選択が適切に行われていることを確認しました。したがって、この動作の原因は何でしょうか？私が間違っているのは何ですか？

関数が機能するHTMLは次のとおりです（DOMから抽出）。

<ul>
<li class="ref-1">310 Raccolte di statistiche generali</li>
<li class="ref-1">320 Scienza politica</li>
<li class="ref-2 attivo">330 Economia </li>
<li class="ref-2 attivo">340 Diritto
    <div class="quadri">
        <ul>
            <li>328 Il processo legislativo</li>
            <li>330 Economia</li>
            <li>340 Diritto</li>
        </ul>
        <a class="extLink" href="http://www...">...</a>
    </div>
</li>
<li class="ref-3">350 Amministrazione pubblica; arte militare</li>
<li class="ref-3">360 Problemi e servizi sociali; associazioni</li>
</ul>

次のように機能します。

  • ページのX要素（他の場所）をクリックすると、クラス'attivo'がli.ref-x（例ではli.ref-2）に追加されます。
  • 同時に、div.quadriはページ内の元の位置から複製され、最後のli.attivoに追加されます。
  • div.quadriの中にはa.extLinkがあります。
  • animo（）関数に渡す選択はli.attivoであるため、li.attivo要素（およびその結果としてdiv.quadriでも）上でマウスを動かすと、a.extLinkがアニメーション化されます。

これはすべてうまく機能し、問題は次のように発生します。

  • ページのY要素をクリックすると、クラス'attivo'がli.ref-y（li.ref-3など）に追加され、li.ref-xから削除されてから、div.quadriがliから削除されます。 ref-xと別のdiv.quadriがli.ref-y内に複製されます。
  • これで、li.ref-y（つまり、li.attivo）だけでなく、li.ref-xでもマウスを動かすと、a.extLinkがアニメーション化されますが、クラス「attivo」はもうありません。
4

1 に答える 1

0

要素を選択してイベントリスナーを登録した後でクラスを要素から削除しても、リスナーの呼び出しは停止せず、リスナーはコンテキストではなくattivoクラス名のみに基づいてアニメーションを実行します。extLink次のいずれかのようなものを試してください。

以前の選択からリスナーを削除します

var previous_sel = $();

function animo( sel ) { 

  // Assumes jQuery 1.7

  previous_sel.off( "mouseenter mouseleave" );

  previous_sel = sel;

  // ... rest of your current function

}

委任された登録を使用する

attivoこれは、イベントの発生時にクラスを持つ要素のリスナーのみを呼び出します。

function animo() {

  // Use appropriate selector to get the relevant UL

  var ul = $( "ul" );

  var selector = "li.attivo";


  ul.on( "mouseenter", selector, function () {       

    ul.find( selector + ' .extLink' ).stop().animate(

      { right : '-5px' }, 'fast'

    );      

  } );


  ul.on( "mouseleave", selector, function () {       

    ul.find( selector + ' .extLink' ).stop().animate(

      { right : '0' }, 'fast'

    );     

  } );

}
// animo

コンテキストを制限する

extLinkコンテキストを内のsに制限しますsel。

function animo( sel ) { 

  sel.hover(      

    function () {       

      sel.find( '.extLink' ).stop().animate( { right : '-5px' }, 'fast' );      

    },          


    function () {       

      sel.find( '.extLink' ).stop().animate( { right : '0' }, 'fast' );         

    }       

  );  

}
于 2012-06-15T20:47:36.370 に答える