Javascript 如何在函数中查找动态添加的数组元素

所以我基本上是在数组中添加一个元素，然后为该元素创建一个文本块。问题是，在我创建的将块文本设置为动态添加的元素文本的函数中调用该元素后，我一直没有定义该元素。当我单击块时，它会通过一个

$（文档）。在（单击）

函数中，数组中的所有数据都会显示出来

保存功能：

function saveNote() {
    var noteTitle = document.getElementById("note-title");
    var noteText = document.getElementById("note-text");

    var noteTitleContent = noteTitle.value;
    var noteTextContent = noteText.value;

    /* SAVING NOTE HEADER & TEXT IN DOUBLE ARRAY */
    chrome.storage.local.get('noteTitleList', function (x) {
        var titleSet = x.noteTitleList;
        titleSet.push(noteTitleContent);

        chrome.storage.local.set({noteTitleList: titleSet}, function() {
            console.log('titleSet Saved: ' + titleSet);
        });
    });

    chrome.storage.local.get('noteTextList', function (x) {
        var textSet = x.noteTextList;
        textSet.push(noteTextContent);

        chrome.storage.local.set({noteTextList: textSet}, function() {
            console.log('textSet Saved: ' + textSet);
        });
    });

    addNote();
}

function addNote() {
    chrome.storage.local.get('noteTitleList', function (x) {
        var titleSet = x.noteTitleList;
        var titleSetLength = titleSet.length;
        var noteTitle = titleSet[titleSetLength]; // results in an undefined

        $element = document.createElement("section");
        $($element).addClass('note-' + titleSetLength);
        $($element).addClass('notelink');
        $element.appendChild(document.createTextNode(noteTitle)); // section text says undefined
        document.getElementById('saved-note-area').appendChild($element);
        $delete = document.createElement("i");
        $($delete).addClass('fa');
        $($delete).addClass('fa-trash-o');
        $($delete).addClass('trash-' + titleSetLength);
        document.getElementById('saved-note-area').appendChild($delete);
    });
});

addNote函数：

function saveNote() {
    var noteTitle = document.getElementById("note-title");
    var noteText = document.getElementById("note-text");

    var noteTitleContent = noteTitle.value;
    var noteTextContent = noteText.value;

    /* SAVING NOTE HEADER & TEXT IN DOUBLE ARRAY */
    chrome.storage.local.get('noteTitleList', function (x) {
        var titleSet = x.noteTitleList;
        titleSet.push(noteTitleContent);

        chrome.storage.local.set({noteTitleList: titleSet}, function() {
            console.log('titleSet Saved: ' + titleSet);
        });
    });

    chrome.storage.local.get('noteTextList', function (x) {
        var textSet = x.noteTextList;
        textSet.push(noteTextContent);

        chrome.storage.local.set({noteTextList: textSet}, function() {
            console.log('textSet Saved: ' + textSet);
        });
    });

    addNote();
}

function addNote() {
    chrome.storage.local.get('noteTitleList', function (x) {
        var titleSet = x.noteTitleList;
        var titleSetLength = titleSet.length;
        var noteTitle = titleSet[titleSetLength]; // results in an undefined

        $element = document.createElement("section");
        $($element).addClass('note-' + titleSetLength);
        $($element).addClass('notelink');
        $element.appendChild(document.createTextNode(noteTitle)); // section text says undefined
        document.getElementById('saved-note-area').appendChild($element);
        $delete = document.createElement("i");
        $($delete).addClass('fa');
        $($delete).addClass('fa-trash-o');
        $($delete).addClass('trash-' + titleSetLength);
        document.getElementById('saved-note-area').appendChild($delete);
    });
});

---

我让您的代码进行了四项更改：

---

（1） 最大的变化是重写了

saveNote（）

函数，这样在调用

chrome.storage.local.set

函数的回调之前，它不会调用

addNote（）

。需要进行此更改，因为

chrome.local.storage

函数是异步的

function saveNote() {
    var noteTitleContent = document.getElementById("note-title").value;
    var noteTextContent = document.getElementById("note-text").value;

    /* SAVING NOTE HEADER & TEXT IN DOUBLE ARRAY */
    chrome.storage.local.get(['noteTitleList', 'noteTextList'], function (x) {
        var titleSet = x.noteTitleList || [];
        var textSet = x.noteTextList || [];

        titleSet.push(noteTitleContent);
        textSet.push(noteTextContent);

        chrome.storage.local.set({noteTitleList: titleSet, noteTextList: textSet}, function() {
            addNote();
        });
    });
}

请注意如何在一次调用

chrome.storage.local.set

时将值存储到两个数组中

---

（2） 关闭

addNote（）

函数时出现语法错误。更改

}）

只需

}

---

（3） 在

addNote（）

函数中，从数组长度中减去一，得到最后一项。改为：

var noteTitle = titleSet[titleSetLength-1];

---

（4） 在注释链接的单击处理程序中（您从问题中删除了该链接），在组合类名时将

1

添加到

c

。这是必需的，因为循环索引

c

是基于零的，而类名上的数字是基于一的

if($this.hasClass('note-'+(c+1))) {

这条线出现在两个地方

---

您还应该将所有代码放在文档就绪处理程序中。（至少注册事件处理程序的代码应该放在那里。）

---

---

我还建议进行其他改进，但这个答案已经很长了。最大的问题是在注释链接的单击处理程序中去掉for循环。

这是太多的代码了。考虑剥离无关的东西。在我看来，你忽略了<代码> Chrome。本地。存储< /代码>函数是异步的。我认为问题与更新DOM…我只是不知道how@Nesiehr-我添加了一个新的答案。我以前从未创建过chrome扩展，但我只是将它与您的代码放在一起。在做了这个答案中列出的更改后，它对我起了作用。