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继续在主题列中的字形之间切换？

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>

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

1 个答案: