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

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

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

或者

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

Semantic UI

Answer 2

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

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

Answer 3

尝试以下代码

<SKU>MY_SKU</SKU>
<StandardProductID>
     <Type>ASIN</Type>
     <Value>MY_SKU'S_ASIN</Value>
</StandardProductID>

这是工作的jsfiddle：https://jsfiddle.net/mrdag8bk/8/

仅为当前选定的表标题切换箭头

3 个答案: