Question

我试图在font-awesome元素之间切换。

我想单击新的a标记时删除font-awesome元素。只有当前点击的a标签才能看到font-awesome元素。

[FIDDLE] [1]

My JS CODE。

$(document).ready(function() { 
    $('.nav ul li:first').append($("<i class='fa fa-chevron-right' aria-hidden='true'></i>")); 
    $('.nav ul li a').click(function(event) { 
    event.preventDefault(); 
    $(this).append($("<i class='fa fa-chevron-right' aria-hidden='true'></i>")); 
$(this).parent().siblings().removeClass('fa fa-chevron-right'); // not working 
     }); 

    }); 

Answer 1

我知道你已经接受一个答案，但你并不需要所有的逻辑 - 所有你需要做的就是设置活动类当前选定的李 - 并使用CSS将FA图标添加到该元素。然后单击每个li将从列表中删除活动类，然后将其应用于选定的l = i - 并且图标会奇迹般地移动。请注意，我没有应用event.preventDefault（）;点击一个 - 我假定他们应该导航到你想要的元素 - 因为他们在一个导航列表中。

将活动类设置为li的好处是您可以随意设置样式 - 以及将图标添加到它。 。

$(document).ready(function() { 
 
    $('nav ul li').click(function(){ 
 
    $('nav ul li').removeClass('active'); 
 
    $(this).addClass('active'); 
 
    }) 
 
});

nav ul li.active:after { 
 
    font-family: FontAwesome; 
 
    content: "\f054"; 
 
    padding-left: 5px; 
 

 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<nav> 
 
    <ul> 
 
    <li class="active"><a href="#">Page 1</a></li> 
 
    <li><a href="#">Page 2</a></li> 
 
    <li><a href="#">Page 3</a></li> 
 
    <li><a href="#">Page 4</a></li> 
 
    </ul> 
 
</nav>

Answer 2

$(document).ready(function() { 
 
    var fontAwesome = $('<i/>').addClass('fa fa-chevron-right'); 
 
    $('.nav ul li:first').append(fontAwesome); 
 
    $('.nav ul li a').on('click', function(event) { 
 
    event.preventDefault(); 
 
    $('.nav ul li a i.fa.fa-chevron-right').remove(); 
 
    $(this).append(fontAwesome); 
 
    }); 
 
});

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="nav"> 
 
    <ul> 
 
    <li><a href="#section-features">Option A</a></li> 
 
    <li><a href="#section-functions">Option B</a></li> 
 
    <li><a href="#section-pecifications">Option C</a></li> 
 
    </ul> 
 
</div>