jQuery表格排序时排序图标重复追加、切换列不消失问题排查

• 全局计数变量timesClicked为所有列共用，不管点击哪一列都会累加计数，切换不同列时计数逻辑完全混乱，无法正确判断当前列的点击次数。
• jQuery remove()方法使用错误：该方法需要传入选择器字符串作为参数，你传入完整的img标签HTML片段无法匹配到页面中已存在的图标元素，导致旧图标没有被删除，每次点击都会重复追加新图标。
• 缺少切换列时的清空逻辑缺失：点击新的可排序列时，没有先移除所有列的现有图标，不符合切换列后其他列图标消失的需求。
• 你在HTML中定义的data-order属性没有被利用，该属性可以直接用来存储当前列的排序状态，无需额外维护全局计数变量，逻辑更清晰。

HTML代码无需修改，JavaScript代码调整如下：

$(document).ready(function(){  
    $(document).on('click', '.column_sort', function(event){
        event.preventDefault();
        const $currentCol = $(this);
        const column_name = $currentCol.attr("id");

        // 先清空所有可排序列的现有图标、移除激活状态
        $(".column_sort").find('img').remove();
        $(".column_sort").removeClass("active");

        // 读取当前列的排序状态，切换排序规则和图标
        let currentOrder = $currentCol.data('order');
        let sendOrder, iconHtml = '';
        if(currentOrder === 'desc') {
            // 首次点击当前列，展示向下箭头，排序为升序
            iconHtml = '<img src="<?=base_url()?>/assets/img/DownArrow.png" alt="降序"/>';
            sendOrder = 'ASC';
            $currentCol.data('order', 'asc');
        } else {
            // 再次点击同列，展示向上箭头，排序为降序
            iconHtml = '<img src="<?=base_url()?>/assets/img/UpArrow.png" alt="升序"/>';
            sendOrder = 'DESC';
            $currentCol.data('order', 'desc');
        }
        $currentCol.append(iconHtml);

        // 重置其他列的排序状态为初始值，保证下次点击其他列时默认展示向下箭头
        $(".column_sort").not($currentCol).data('order', 'desc');

        const PageNumber = $("#pagination").find("strong").html();
        $.ajax({  
            url: '<?=base_url()?>/Main/fetch_details/', 
            method: "POST",  
            data: {column_name: column_name, order: sendOrder, PageNumber: PageNumber},  
            success: function(data) {  
                $("#postsList tr:not(:first)").remove();
                $("#postsList2").show();
                $currentCol.addClass('active');
                return false;
            }
        }) 
    });  
});

内容的提问来源于stack exchange，提问作者Neha