Question

我正在尝试在单击元素时拼接数组。当我在console.log中新建数组时，它是不规则的，有时会删除错误的数组元素，最后的索引永远不会被删除。这里有人对此有一个很好的解释吗？

var container = document.getElementById('container'),
notDone = document.getElementsByClassName('notDone'),
deleting = document.getElementsByClassName('delete'),
div,
remove,
i,
toDo = [
'One',
'Two',
'öäå'],


for(i = 0; i < toDo.length; i++){
    div = document.createElement('div');
    div.innerHTML = toDo[i];
    div.className = 'notDone';
    remove = document.createElement('div');
    remove.innerHTML = '<p>Remove</p>';
    remove.setAttribute("data-id", i);
    remove.className = 'delete';

    container.appendChild(div);
    div.appendChild(remove);

    notDone[i].addEventListener('click', function(){

        if(this.classList.contains('notDone')){
            this.className = 'done';
        }else{
            this.className = 'notDone';
        }
    });

    deleting[i].addEventListener('click', function(event){
        event.stopPropagation();
        var shouldDelete = this.getAttribute("data-id");
        console.log('va' + shouldDelete);
        toDo.splice(shouldDelete, 1);
        this.parentNode.remove();
        console.log(toDo);
    });
}
var check = document.getElementById('check');
check.addEventListener('click', function(){
    console.log(toDo + ' checking array')
});

Answer 1

它有时会删除错误的数组元素

您面临的问题是data-id存储了固定索引，但toDo数组是可变的。从数组中删除元素时，其后面的所有索引都将变为无效。例如，当您.splice(0, 1)时，您不能再执行splice(2, 1)因为数组只剩下两个项目了。

永远不会删除最后一个索引。

如果你先点击最后一个元素，那就可以了。

你可以做的是

不从toDo数组中删除索引（并切割整个数组），只是将数组值设置为null;或
不存储原始索引，而是存储要删除的值，并在每次删除元素时在当前数组中搜索它们（使用indexOf）

Javascript中的拼接数组是不规则的

1 个答案: