javascript - 如果单击另一个元素，如何重置元素中的类？

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-sort-by-attributes，但随后单击主题列，如何在继续切换的同时将客户端列中的 glyphicon 重置为 glyphicon-sort主题栏中的字形图标之间？

标签： javascriptjqueryhtml

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>