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

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>

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

 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>

Answer 3

你可以使用普通的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. 使用此元素使用target獲取當前元素，后使用parentElement獲取其父節點，因為該事件是在點擊<i><i/>元素時觸發的，並且它位於th ，最后使用cellIndex獲取單元cellIndex引
3. if 和 else 中不需要 console.log，只有在事件 id 觸發時才需要