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 里面有一个.extLink；
  • 我传递给 animo() 函数的选择是 li.attivo，所以当我在 li.attivo 元素上移动鼠标（因此也在 div.quadri 上）时，a.extLink 是动画的。

这一切都很好，问题来了：

  • 当我单击页面的 Y 元素时，将类“attivo”添加到 li.ref-y（例如 li.ref-3）并从 li.ref-x 中删除，然后从 li 中删除 div.quadri。 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

限制上下文

将上下文限制在extLinks 内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 回答