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

Question

基本上我是在向数组中添加一个元素，然后为该元素创建一个文本块。问题是，由于在我创建的用于将块文本设置为动态添加的元素文本的函数中调用该元素，我一直未定义。当我单击该块时，它会通过一个 $(document).on(click) 函数，因此数组中的所有数据都会显示出来。

保存函数：

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();
}

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);
    });
});

Answer 1

我得到了你的代码以进行四处修改：

(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) 在笔记 link（您从问题中删除）的点击处理程序中，在将 class 放在一起时将 1 添加到 c姓名。这是必需的，因为循环索引 c 是从零开始的，而 class 名称上的数字是从一开始的。

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

这条线出现在两个地方。

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

我会推荐其他改进，但这个答案已经很长了。最大的是摆脱音符 links.

的点击处理程序中的 for 循环

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

How to find a dynamically added array element in a function

html

javascript

arrays

jquery

google-chrome-extension