Umschaltpfeil nur für den aktuell ausgewählten Tabellenkopf

Question

Wie kann ich nur auf den aktuell ausgewählten Tabellenkopf abzielen (so wie sich die Farbe nur für die ausgewählte Kopfzeile ändert), so dass der daneben liegende Pfeil als einziger zum Drehen umgeschaltet wird auf Klick?

<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

Versuchen Sie, den folgenden Code

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

Hier ist die Arbeits jsfiddle: https://jsfiddle.net/mrdag8bk/8/

Answer 2

im Rahmen des Elements Finden Sie Ihr Element, dass das Ereignis auf ausgelöst wurde:

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

Oder

$(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/