Question

我有一个带图标的菜单，我试图通过添加类.fa-spin来使所选列表的fontawesome图标旋转。我不知道为什么我的代码不起作用，尽管我使索引等于点击的项目。

我很欣赏一些见解。

<ul>
<li><a class="menu-1" href="#"><i class="fa fa-home"></i> <span>1</span></a></li>
<li><a class="menu-1" href="#"><i class="fa fa-shopping-cart"></i> <span>2</span></a></li>
<li><a class="menu-1" href="#"><i class="fa fa-info"></i> <span>3</span></a></li>
<li><a class="menu-1" href="#"><i class="fa fa-circle-o-notch"></i> <span>4</span></a></li>
<li><a class="menu-1" href="#"><i class="fa fa-globe"></i> <span>5</span></a></li>
<li><a class="menu-1" href="#"><i class="fa fa-envelope"></i> <span>6</span></a></li>
</ul>

这是我的Jquery代码：

 $('nav ul li a').click(function(){
        $('nav ul li .fa').eq($(this).index()).addClass('fa-spin').siblings().removeClass('fa-spin');
});

Answer 1

您的目标元素错误 - 您需要添加/删除anchor元素

中的类

＆＃13;

$('nav ul li a').click(function () {
    $(this).addClass('fa-spin').parent().siblings().find('.fa-spin').removeClass('fa-spin');
});

＆＃13;

<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<nav>
<ul>
    <li><a class="menu-1" href="#"><i class="fa fa-home"></i> <span>1</span></a></li>
    <li><a class="menu-1" href="#"><i class="fa fa-shopping-cart"></i> <span>2</span></a></li>
    <li><a class="menu-1" href="#"><i class="fa fa-info"></i> <span>3</span></a></li>
    <li><a class="menu-1" href="#"><i class="fa fa-circle-o-notch"></i> <span>4</span></a></li>
    <li><a class="menu-1" href="#"><i class="fa fa-globe"></i> <span>5</span></a></li>
    <li><a class="menu-1" href="#"><i class="fa fa-envelope"></i> <span>6</span></a></li>
</ul>
</nav>

＆＃13;

Answer 2

尝试使用Web动画API

Element.animate();

然后你不需要添加类和删除类

最简单的参考：http://updates.html5rocks.com/2014/05/Web-Animations---element-animate-is-now-in-Chrome-36

所选项目不会旋转

2 个答案: