Question

我有一个使用DataTables构建表的页面，每行都有一个Action Button，它将该行中的一些数据（一个ID，只是一个int）添加到一个列表中。为了防止用户多次单击每个操作按钮，我在第一次单击它时删除了一行按钮。这很有效，直到我意识到如果你切换到表格的下一页然后切换回第一页，按钮会回来。

为了解决这个问题，我编写了一些JS来将每行与我的数据列表进行比较，如果该行的数据已经在列表中，则会删除该行的操作按钮。每次重新加载表时（例如，当您切换到表的不同页面并再次返回时）都会发生这种情况，使用DataTable的draw.dt函数。

问题是，当我切换页面并且JavaScript开始工作时删除按钮，由于某种原因它跳过每隔一行。例如，如果我单击（从而删除）前三行的操作按钮，切换页面并切换回来，我的JS将删除第1,3和5行上的操作按钮，而不是第1,2和3行。它就是这样一致的是，由于我粗犷的JS技能，它必须是某种简单的循环错误，但我找不到它。

以下是代码：

$(document).on('draw.dt', function () {
    var $allSerialNumbers = $('.box-electrode'); // This is a list of all the rows' action buttons / ID's

    $('#electrodes li').each(function (i, li) { // This is the list of ID's I'm comparing to
        var $id = $(li).data('id');
        for(var index = 0; index < $allSerialNumbers.length; index++){
            if($id == $allSerialNumbers.eq(index).attr('data-id')){ // For each item in my ID list, run through all the rows and see if any Action Button ID's match any on the list
                $('.box-electrode').eq(index).remove(); // If they do match, remove that Action Button 
            }
        }
    })
});

Answer 1

我不是JQuery的专家，但是你的最后一行remove()可能会重新调整列表的大小，以便过去在索引1的元素现在位于索引0，导致你跳过它增加索引时？

从JavaScript中的表中删除操作按钮时的奇怪行为

1 个答案: