Jquery 仅针对当前选定的表格标题切换箭头

如何仅针对当前选定的表格标题（就像仅针对选定标题更改颜色一样），使其旁边的箭头成为单击时切换为旋转的唯一箭头

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

---

jsiddle:

在触发事件的元素的上下文中查找您的元素：

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

或

请尝试以下代码

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

---

这是正在工作的JSFIDLE:

问题是，当单击另一个标题时，应该从先前单击的标题中删除红色。@Matt这是我可以看到的行为。我看到它现在做的是正确的事情，但它做的事情与另一个解决方案相同：将a:：before伪类应用于单词，切换时，单词的左边会出现一个框。这正是我想要的，除了切换时在标题左边看到一个小框外，它似乎是一个丢失的图标。它所要做的就是在单击时旋转箭头，而不是应用任何：：before伪类。

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

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

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