jQuery追加和删除不与动态列工作

Question

我正在使用Ajax和jQuery，我正在排序(没有数据表)，我得到正确的结果，但只是想显示排序图标(向上，向下)，我想每当我点击任何列(名称或符号)排序然后"图标应该显示出来，然后点击"下"键;图标应替换为"up"每当我点击另一列时，这两个图标都应该删除并显示在另一列上列的排序和前面一样。我该怎么做呢?我尝试了以下代码，但图标追加(显示多次)，我错了吗?

这是我的html:

<table border='1' width='100%' style='border-collapse: collapse;' id='postsList'>
<thead>
<tr>
<th>S.no</th>
<th class="column_sort" id="name" data-order="desc" href="#">Title</th>
<th class="column_sort" id="symbol" data-order="desc" href="#">Symbol</th>
</tr>
</thead>
<tbody></tbody>
</table>

下面是我的脚本代码:

$(document).ready(function(){  
var timesClicked = 0;
$(document).on('click', '.column_sort', function(event){
event.preventDefault();
var column_name = $(this).attr("id");  
timesClicked++;

if (timesClicked % 2 == 1) { // after first click(even clicks)
$('#'+column_name+'').append('<img src="<?=base_url()?>/assets/img/DownArrow.png"/>');   
$('#'+column_name+'').remove('<img src="<?=base_url()?>/assets/img/UpArrow.png"/>');
var order = "ASC";
}else{
var order = "DESC";   // after second click(odd clicks)
$('#'+column_name+'').remove('<img src="<?=base_url()?>/assets/img/DownArrow.png"/>');   
$('#'+column_name+'').append('<img src="<?=base_url()?>/assets/img/UpArrow.png"/>');
};
var arrow = '';  
var PageNumber= $("#pagination").find("strong").html();
$(".column_sort").removeClass("active");
$.ajax({  
url:'<?=base_url()?>/Main/fetch_details/', 
method:"POST",  
data:{column_name:column_name, order:order ,PageNumber:PageNumber},  
success:function(data) {  
$("#postsList tr:not(:first)").remove();
$("#postsList2").show();
$('#'+column_name+'').addClass('active');
return false;
}
}) 
});  
});  

Answer 1

如果你检查你的浏览器的devtools控制台，我想你会看到错误。

如果您检查.remove()的文档，它删除匹配的元素-在您的情况下，它试图删除整个<th>。如果传递一个参数，它应该是一个选择器(而不是HTML)，它将过滤匹配的元素，而不是查找嵌套的元素。因为您正在传递HTML，所以.remove()调用正在生成错误并失败，因此img永远不会被删除。下次点击时，一个新的文件将被添加到已有的文件中。

所以你真正想要的是:

$('#' + column_name + ' img').remove();

这将匹配<th>中的<img>元素，并将其删除。

下一个问题-添加和删除元素的顺序很重要。对于第一次点击，你可以添加一个向下的箭头。如果我们现在进行删除，选择器将匹配任何图像。这意味着我们将删除旧的和新添加的图像!

所以我们需要注意1)首先删除旧图像;2)添加新图像

下面是一个工作片段-单击Run按钮查看它的运行情况。我当然没有你的图像，所以我用<span>s代替<img>元素，但这个想法是完全相同的。

我也删除了你的AJAX代码，因为这是不相关的问题。

$(document).ready(function(){  
var timesClicked = 0;
$(document).on('click', '.column_sort', function(event){
event.preventDefault();

var column_name = $(this).attr("id");  
timesClicked++;

if (timesClicked % 2 == 1) {
$('#' + column_name + ' span').remove();
$('#' + column_name).append('<span> v</span>');   
} else {
$('#' + column_name + ' span').remove();
$('#' + column_name).append('<span> ^</span>');
};
});  
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border='1' width='100%' style='border-collapse: collapse;' id='postsList'>
<thead>
<tr>
<th>S.no</th>
<th class="column_sort" id="name" data-order="desc" href="#">Title</th>
<th class="column_sort" id="symbol" data-order="desc" href="#">Symbol</th>
</tr>
</thead>
<tbody></tbody>
</table>

PS:作为每次点击添加和删除元素的替代方案，简单地切换页面上已经存在的元素的可见性可能是一个更简洁的解决方案。例如，两个箭头图像在页面加载时已经在页面上，但带有"隐藏";类。每次点击，然后只是切换类打开/关闭。比如:

$('#' + column_name + ' img').toggleClass('hidden');

Answer 2

如何显示箭头图标取决于您，对于我的示例，我只是使用html实体。将向上和向下箭头包装成单独的标记(在我的示例中是span)，并将它们包含在每个列标题的TH标记中。

<th class="column_sort" id="name" data-order="desc" href="#">
Title
<span>&uarr;</span><span>&darr;</span>
</th>

默认情况下隐藏所有的span，我们将通过在我们将添加到已经有column_sort类的TH的其他两个类之间切换来专门针对其他span。

.column_sort{cursor:pointer}
.column_sort span{display:none;}
.sort_asc span:first-child{display:inline;}
.sort_desc span:nth-child(2){display:inline;}

javascript:

$(document).on('click', '.column_sort', function(event){
var $x = $(event.target);
var ascending = $x.hasClass('sort_asc') ? true : false;
// Remove arrows from any columns currently displaying them
$('.column_sort.sort_asc').removeClass('sort_asc');
$('.column_sort.sort_desc').removeClass('sort_desc');
// Show the appropriate arrow
if (ascending){     
$x.addClass('sort_desc');   
}else{
$x.addClass('sort_asc');    
}

});

https://jsfiddle.net/176hj8s0/

既然你已经有了处理上升和下降顺序的逻辑，你就可以利用它来决定添加哪个类。

Answer 3

您还可以使用美观的图标而不是img来显示上下箭头。下面是我如何做的一个工作例子:步骤1。在列名后使用标签

<tr>
<th>S.no</th>
<th class="column_sort" id="name" data-order="desc" href="#">
Title <i class="fas fa-angle-down rotate-icon pr-10"></i>
</th>
<th class="column_sort" id="symbol" data-order="desc" href="#">
Symbol <i class="fas fa-angle-down rotate-icon pr-10"></i>
</th>

2。Jquery:首先检查哪个列被点击，找到图标标签的类，并切换它。

<script type="text/javascript">
$(document).on('click', '.column_sort', function(event) {
event.preventDefault();
if ($(this).find(".fas").hasClass('fa-angle-down')) {
$(this).find(".fas").removeClass('fa-angle-down');
$(this).find(".fas").addClass('fa-angle-up');
} else {
$(this).find(".fas").removeClass('fa-angle-up');
$(this).find(".fas").addClass('fa-angle-down');
}
});