获得列的位置(如第一、第二等)

Question

当我单击一个图标时，它会改变，但我想知道在哪个列中单击了图标(比如第一个或第二个或第三个)。

​

$(".fa-caret-down").click(function(){
    if($(this).is(".fa-caret-down")){
        $(this).removeClass("fa-caret-down").addClass("fa-caret-up");
        //console.log() - in which column it was changed
    }else{
        $(this).removeClass("fa-caret-up").addClass("fa-caret-down");
        //console.log() - in which column it was changed
    }
});

<table style="width:100%">
    <thead>
        <tr>
            <th>#<i class="fas fa-caret-down ml-2" style="cursor: pointer;"></i></th>
            <th>Name<i class="fas fa-caret-down ml-2" style="cursor: pointer;"></i></th>
            <th>Price<i class="fas fa-caret-down ml-2" style="cursor: pointer;"></i></th>
            <th>1h %<i class="fas fa-caret-down ml-2" style="cursor: pointer;"></i></th>
            <th>24h %<i class="fas fa-caret-down ml-2" style="cursor: pointer;"></i></th>
            <th>Timestamp<i class="fas fa-caret-down ml-2 align" style="cursor: pointer;"></i></th>
        </tr>
    </thead>
    <tbody></tbody>
</table>

​

Answer 1

jQuery索引函数将返回元素的索引。

​

$(".fa-caret-down").click(function(){
    console.log($(this).parent().index()) //- in which column it was changed
    if($(this).is(".fa-caret-down")){
        $(this).removeClass("fa-caret-down").addClass("fa-caret-up");
    }else{
        $(this).removeClass("fa-caret-up").addClass("fa-caret-down");
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<table style="width:100%">
    <thead>
        <tr>
            <th>#<i class="fas fa-caret-down ml-2" style="cursor: pointer;"></i></th>
            <th>Name<i class="fas fa-caret-down ml-2" style="cursor: pointer;"></i></th>
            <th>Price<i class="fas fa-caret-down ml-2" style="cursor: pointer;"></i></th>
            <th>1h %<i class="fas fa-caret-down ml-2" style="cursor: pointer;"></i></th>
            <th>24h %<i class="fas fa-caret-down ml-2" style="cursor: pointer;"></i></th>
            <th>Timestamp<i class="fas fa-caret-down ml-2 align" style="cursor: pointer;"></i></th>
        </tr>
    </thead>
    <tbody></tbody>
</table>

​

Answer 2

只需使用事件委托和classList.replace()方法

(css更清楚)

每个TD或TH元素都有一个cellIndex属性

​

document.querySelector('table thead').onclick = e =>
  {
  if (!e.target.matches('i.fas')) return   // ignore clicks from elsewhere

  let eTH    = e.target.closest('th')
    , onDown = e.target.classList.contains('fa-caret-down')
    ;
  console.clear()
  console.log( 'column :', eTH.cellIndex, eTH.innerText, onDown?'UP':'DOWN'  ),
  setTimeout(console.clear,3000)

  if (onDown) e.target.classList.replace('fa-caret-down','fa-caret-up')
  else        e.target.classList.replace('fa-caret-up','fa-caret-down')
  }

table {
  width: 100%;
}
table thead th i.fas {
  cursor : pointer;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css" >

<table >
  <thead>
    <tr>
      <th>#<i class="fas fa-caret-down ml-2" ></i></th>
      <th>Name<i class="fas fa-caret-down ml-2" ></i></th>
      <th>Price<i class="fas fa-caret-down ml-2" ></i></th>
      <th>1h %<i class="fas fa-caret-down ml-2" ></i></th>
      <th>24h %<i class="fas fa-caret-down ml-2" ></i></th>
      <th>Timestamp<i class="fas fa-caret-down ml-2 align" ></i></th>
    </tr>
  </thead>
  <tbody></tbody>
</table>

​

但是IMHO如果使用整个列标题来反转图，会更酷。

​

document.querySelector('table thead').onclick = ({target}) =>
  {
  if (!target.matches('table thead th, table thead th i.fas')) return  // ignore clicks from elsewhere

  let eIfas  = target.querySelector('i.fas')
    , eTH    = target.closest('th')
    , onDown = eIfas.classList.contains('fa-caret-down')
    ;
  console.clear()
  console.log( 'column :', eTH.cellIndex, ':',eTH.innerText, onDown?'UP':'DOWN'  )
  setTimeout(console.clear,5000)

  if (onDown)  eIfas.classList.replace('fa-caret-down','fa-caret-up')
  else         eIfas.classList.replace('fa-caret-up','fa-caret-down')
  }

table {
  width: 100%;
}
table thead th {
  cursor : pointer;
}
table thead th:hover {
  background-color: lightgoldenrodyellow;
}
table thead th:hover i.fas {
  color: crimson;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css" >

<table >
  <thead>
    <tr>
      <th># <i class="fas fa-caret-down ml-2" ></i></th>
      <th>Name <i class="fas fa-caret-down ml-2" ></i></th>
      <th>Price <i class="fas fa-caret-down ml-2" ></i></th>
      <th>1h % <i class="fas fa-caret-down ml-2" ></i></th>
      <th>24h % <i class="fas fa-caret-down ml-2" ></i></th>
      <th>Timestamp <i class="fas fa-caret-down ml-2 align" ></i></th>
    </tr>
  </thead>
  <tbody></tbody>
</table>

​