現在選択されているテーブルヘッダーの矢印のみを切り替えます

Question

（選択したヘッダーの色が変更されるのと同じように）現在選択されているテーブルヘッダーのみを対象にすることができます。クリックで？

<table class="container cf"> 
    <thead class="cf"> 
    <tr> 
     <th class="numeric">amount <i class="glyphicon glyphicon-triangle-bottom"></i></th> 
     <th class="numeric">case <i class="glyphicon glyphicon-triangle-bottom"></i></th> 
     <th class="numeric">field 3 <i class="glyphicon glyphicon-triangle-bottom"></i></th> 
     <th class="numeric">field 4 <i class="glyphicon glyphicon-triangle-bottom"></i></th> 
     <th class="numeric">location <i class="glyphicon glyphicon-triangle-bottom"></i></th> 
     <th class="numeric">date <i class="glyphicon glyphicon-triangle-bottom"></i></th> 
    </tr> 
    </thead> 
    <tbody class="verdicts"> 
    <tr> 
     <td data-title="amount" class="amount">8,570,000.00<span class="result"></span></td> 
     <td data-title="case">title</td> 
     <td data-title="practice area">area</td> 
     <td data-title="user">Bob jones</td> 
     <td data-title="location">Orlando, FL</td> 
     <td data-title="date">Mar 6, 2017</td> 
    </tr> 
    <tr> 
     <td data-title="amount" class="amount">$447,115<span class="result"></span></td> 
     <td data-title="case">Another title</td> 
     <td data-title="practice area">area</td> 
     <td data-title="user">Joe Smith</td> 
     <td data-title="location">Orlando, FL</td> 
     <td data-title="date">Mar 6, 2017</td> 
    </tr> 
    </tbody> 
</table> 

jQueryの

$(".numeric").click(function() { 
    $(".numeric").removeClass('numeric-active'); 
    $(this).toggleClass("numeric-active"); 
    $(".glyphicon-triangle-bottom").toggleClass("rotate"); 
}); 

JSFIDDLE：LINK

Answer 1

ここでは、次のコード

$(".numeric").click(function() { 
    $(".numeric").removeClass('numeric-active'); 
    $(this).toggleClass("numeric-active"); 
    $(this).find('i').toggleClass("rotate"); 
}); 

を試してみてください作業jsfiddleです：https://jsfiddle.net/mrdag8bk/8/

Answer 2

イベントが上のトリガされたことを要素のコンテキスト内であなたの要素を探す：

$(".glyphicon-triangle-bottom", this).toggleClass("rotate"); 

または

$(this).find(".glyphicon-triangle-bottom").toggleClass("rotate"); 

JSFiddle

Answer 3

$(".numeric").click(function() { 
    $(".numeric").removeClass('numeric-active'); 
    $(this).toggleClass("numeric-active"); 
    $(this).children("i").toggleClass("rotate"); 
}); 

https://jsfiddle.net/mrdag8bk/7/