はtoggleClassで問題をトグルしません。

Question

私はいくつかの異なるjQueryメソッドを試しましたが、これを動作させることはできませんでした。私はちょうど2 fontawesomeのアイコンを切り替えるための簡単なソリューションを探しています。私は、クリックすると新しいクラスが追加されるのを見ることができますが、古いクラスは削除されていません。

$('.arrow-up').on('click', function(){ 
 
     $('.fa-chevron-down').toggleClass('fa-chevron-up'); 
 
     });

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous"> 
 
\t <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> 
 

 
<div class="container"> 
 
\t <div class="row"> 
 
\t \t <div class="col-md-10 offset-md-2 pt-3"> 
 
\t \t \t <div class="btn btn-success arrow-up"> 
 
\t \t \t \t <i class="fa fa-chevron-down"> 
 
       </i> 
 
\t \t \t \t Show this</div> 
 
\t \t </div> 
 
\t </div> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>

すべてのヘルプは理解されるであろう。

Answer 1

両方のクラスを空白で区切って切り替えます。

$('.arrow-up').on('click', function() { 
 
    // select `i` tag with class `fa` withtin the div and toggle both classes 
 
    $('i.fa', this).toggleClass('fa-chevron-up fa-chevron-down'); 
 
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous"> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> 
 

 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-md-10 offset-md-2 pt-3"> 
 
     <div class="btn btn-success arrow-up"> 
 
     <i class="fa fa-chevron-down"> 
 
       </i> 
 
     Show this</div> 
 
    </div> 
 
    </div> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>