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

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 触发时才需要