Question

我希望能够根据用户鼠标移动某些区域来添加和删除类。以下是WordPress生成的导航代码：

    <nav id="site-navigation" class="main-navigation" role="navigation" data-small-nav-title="Navigation">
    <ul id="menu-new-blog-main-2" class="nav-bar clearfix">
    <li id="menu-item-10168" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-10168"><a href="http://www.proformablog.com/about-proforma/">About Proforma</a></li>
    <li id="menu-item-10169" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10169"><a href="http://www.proforma.com">Proforma.com</a></li>
    <li id="menu-item-10170" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10170"><a href="http://proforma.com/contact.html">Contact Us</a></li>
    </ul>               
    </nav>

我已经提出了以下针对<li>的JavaScript，以便更改<li>中的链接类：

  <script>
  $(document).ready(function(){
  $('#site-navigation li').mouseenter(function(){   

    $(this).find('li.menu-item a').addClass('animated, bounceIn');
    //$(this).find('.span').addClass('fadeInUp');

    });


    $('#site-navigation li'').mouseleave(function(){    

    $('#site-navigation li'').find('li.menu-item a').removeClass('animated, bounceIn');
    //$('#site-navigation li').find('.span').removeClass('animated, fadeInUp');

    });
  });   
  </script>

我已经检查了控制台，看起来该事件甚至无法启动以使代码正常工作。非常感谢任何帮助。

Answer 1

使用jQuery添加/删除类时，它们应该是空格分隔的，而不是以逗号分隔。所以：

$(this).find('li.menu-item a').addClass('animated bounceIn');

此外，您不应将mouseleave嵌套在mouseenter个功能中。此外，您应该使用$.on代替。

此外，在您的事件处理程序中，您无法正确访问元素。 $(this)指的是已输入或离开的元素。由于您已在<li>元素上设置了mouseenter处理程序，因此$(this).find('li.menu-item a')找不到任何内容。

试试这个：

// It's often best practice to cache jQuery objects
// so you're not looking up the elements multiple times.
var $listItems = $('#site-navigation li');

$listItems.on('mouseenter', function(){   
  $(this).find('a').addClass('animated bounceIn');
});

$listItems.on('mouseleave', function(){   
  $(this).find('a').removeClass('animated bounceIn');
});

所有这些都说，如果您只是想在悬停时尝试动画，那么只能在<a>元素上使用一个类来实现CSS中的动画。这里的jQuery可能有点矫枉过正。

Answer 2

$('#site-navigation li'')

应该是

$('#site-navigation li')

或

$("#site-navigation li")

（你的引号有误）

并阻止使用选择器的重复，这样做：

var $el = $('#site-navigation li')

$el.mouseenter(function(){   
     $(this).find('li.menu-item a').addClass('animated bounceIn');
     $(this).find('.span').addClass('fadeInUp');
});

$el.mouseleave(function() {
      $(this).find('li.menu-item a').removeClass('animated bounceIn');
}

进一步阅读：http://www.sitepoint.com/efficient-jquery-selectors/

祝你好运

Answer 3

查看此fiddle。

这是片段。（我已在alert和enter个事件中添加leave进行测试。

$(document).ready(function() {
  $('#site-navigation li').mouseenter(function() {
    alert("Enter " + $(this).text());

    $(this).find('li.menu-item a').addClass('animated, bounceIn');
    //$(this).find('.span').addClass('fadeInUp');

  });


  $('#site-navigation li').mouseleave(function() {

    alert("Leave " + $(this).text());

    $('#site-navigation li').find('li.menu-item a').removeClass('animated bounceIn');
    //$('#site - navigation li ').find('.span ').removeClass('animated, fadeInUp ');

  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav id="site-navigation" class="main-navigation" role="navigation" data-small-nav-title="Navigation">
  <ul id="menu-new-blog-main-2" class="nav-bar clearfix">
    <li id="menu-item-10168" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-10168"><a href="http://www.proformablog.com/about-proforma/">About Proforma</a>

    </li>
    <li id="menu-item-10169" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10169"><a href="http://www.proforma.com">Proforma.com</a>

    </li>
    <li id="menu-item-10170" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10170"><a href="http://proforma.com/contact.html">Contact Us</a>

    </li>
  </ul>
</nav>

在mouseEnter上使用JavaScript添加和删除类到Element

3 个答案: