javascript - 所选项目不旋转

Question

我有一个带有图标的菜单，我试图通过添加 .fa-spin 类来使所选列表的字体图标旋转。我不知道为什么我的代码无法正常工作，尽管我将索引设置为与单击的项目相等。

我很欣赏一些见解。

<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 元素中添加/删除类

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

<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>