獲取列位置（如第一、第二等）

當我單擊一個圖示時，它會發生變化，但我想知道在哪一列中單擊了圖示（例如第一個或第二個或第三個等）

$(".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>

uj5u.com熱心網友回復：

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>

uj5u.com熱心網友回復：

你可以使用普通的javascript來獲取它，讓我在下面展示：

$(".fa-caret-down").click(function(event){
    console.log(event.target.parentElement.cellIndex)
    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");
    }
});

1. 將事件作為引數傳遞給點擊函式：
2. 使用這個元素使用 獲取當前元素，使用targetaftet 獲取其父節點，parentElement因為事件是觸發點擊<i><i/>元素并且它在 a 內部th，最后使用獲取單元格索引cellIndex
3. if 和 else 中不需要 console.log，只有在事件 id 觸發時才需要

uj5u.com熱心網友回復：

只需使用事件委托和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>

但恕我直言，如果使用整個列標題來反轉圖形會更酷

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>

標籤：javascript html 查询

上一篇：Jquery在“檢查”2個輸入時采取行動

下一篇：PowerShelltr??ycatch中的例外型別詳細資訊不匹配