如果單擊另一個元素，如何重置元素中的類？

Question

我正在對一個表進行排序，並使用引導字形來顯示排序的方向。 我想知道如果單擊另一列，是否有辦法將一列重置為原始字形。

 $('.tablePointer').click(function() { $(this).find('i').each(function() { var classes = ['glyphicon glyphicon-sort-by-attributes', 'glyphicon glyphicon-sort-by-attributes-alt']; this.className = classes[($.inArray(this.className, classes) + 1) % classes.length]; }); 

  <th class="tablePointer fontsize-smmd" id="clientSort"><span>Client </span><i class="glyphicon glyphicon-sort"></i></th> <th class="tablePointer fontsize-smmd" id="subjectSort"><span>Subject </span><i class="glyphicon glyphicon-sort"></i></th> <th class="tablePointer fontsize-smmd" id="authorSort"><span>Author </span><i class="glyphicon glyphicon-sort"></i></th> <th class="tablePointer fontsize-smmd" id="dateSort"><span>Creation Date </span><i class="glyphicon glyphicon-sort"></i></th> 

例如，如果最初單擊了客戶列，並且glyphicon更改為glyphicon-by-attributes，但隨后又單擊了主題列，那么如何在繼續切換的同時將client列中的glyphicon重置為glyphicon-sort主題列中的圖示符之間？

Answer 1

首先從所有圖標中刪除該課程，然后僅將其應用於單擊的圖標

請參見下面的示例（單擊列名稱旁邊的彩色塊）：

 $('.glyphicon-sort').on('click', el => { $('.glyphicon-sort').removeClass('glyphicon-sorting'); $(el.target).closest('.glyphicon-sort').addClass('glyphicon-sorting'); }); 

 .glyphicon-sort, .glyphicon-sorting { width: 20px; height: 20px; display: inline-block; cursor: pointer; } .glyphicon-sort { background: blue; } .glyphicon-sorting { background: green; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <th class="tablePointer fontsize-smmd" id="clientSort"><span>Client </span><i class="glyphicon glyphicon-sort"></i></th> <th class="tablePointer fontsize-smmd" id="subjectSort"><span>Subject </span><i class="glyphicon glyphicon-sort"></i></th> <th class="tablePointer fontsize-smmd" id="authorSort"><span>Author </span><i class="glyphicon glyphicon-sort"></i></th> <th class="tablePointer fontsize-smmd" id="dateSort"><span>Creation Date </span><i class="glyphicon glyphicon-sort"></i></th>