javascript从数组中删除项目，拼接

Question

我正在使用 localstaorage 制作一个小应用程序（尚未实现）：您在文本区域中输入一个注释，它会显示在一个列表中

笔记堆叠在一个名为笔记的对象中（用于将来的本地存储）；

但我的问题是：我可以添加一个注释，但是当我尝试删除它们时，我必须删除我的 li 和“notes”数组中的相关注释对象，所以我决定使用拼接方法，但它以一种奇怪的方式工作......

当我点击“关闭”时，它可以正常工作一两次，但此刻数组中只有一两个对象...

我尝试了不同的方法来解决这个问题，但没有成功......

这里是小提琴：http://jsfiddle.net/h8hg6/1/

感谢您的帮助

Answer 1

我对你的小提琴做了一些修改，我认为可以解决问题。本质上，您错误地使用了.splice，并且您的数组与您的笔记元素不同步。我已经用基于数字的对象替换了您的数组，因为它更容易处理。以下是一些相关的变化：

http://jsfiddle.net/h8hg6/2/

var notes = {}; // notes is now an object instead of an array
// snip

var number = jQuery(this).parents('li').data('number');
delete notes[number]; // this is how you remove properties from an object

// snip
var note = {
    color: color,
    text: text
};

notes[i] = note; // add this object as a property of the notes object
i++;

Answer 2

问题在于您对splice 的调用使用queue 变量的值来确定将在notes 数组中删除的元素的索引。就在这里：

notes.splice(queue, 1);

由于queue 的值一直在增加（就在这里）：

 function addNoteToPage(){
    i++;
    ...
    jQuery('ul#notes li:first').before('<li  data-queue="'+ i +'">'+ note.text +' <a href=""#>CLOSE</a>

您遇到了在 notes 数组的不存在索引上调用 splice 的时刻，结果没有任何内容被删除。基本上，您最终会得到一个不同步的 notes 数组。

您需要确保data-queue 属性的值与notes 数组中元素的实际索引一致，以便您对splice(queue,1) 的调用始终成功并删除适当的数组元素。

话虽如此，如果上面的答案对你有用，我会选择那个。我只是想让您更深入地了解正在发生的事情......