附加 Javascript 后元素的数量保持不变答案

【问题标题】：Number of elements remains the same after appending with Javascript附加 Javascript 后元素的数量保持不变
【发布时间】：2019-10-25 01:32:48
【问题描述】：

我正在创建一个注释列表，可让您从输入值添加注释。

在笔记列表ul 下，它会显示一条消息，说明笔记的数量。 ($('li').length)。

但是，如果您将新笔记添加到列表中，笔记的数量将保持不变。当您添加新笔记或通过删除列表中的所有谎言清除所有笔记时，它不会更新。

我尝试创建一个显示音符数量的函数，并将其添加为 addNote 和 clearNote 函数之后的回调函数，但它仍然只显示原始中 li 的数量HTML。 (3li)。

如何更新它以便在添加 li 时添加一个？

//    N° of notes length
let numberOfNotes = $('li').length;
//   End  N° of notes length

NotesNumberMessage()

// Display N° of notes length
function NotesNumberMessage() {
    $('#NumberPostMessage').text(`You have ${numberOfNotes} active notes`);
};
// End display N° of notes length

// Add a new note function
function addNote() {
    $('#addBtn').on('click', function () {
        let noteText = ($('#input').val());
        let newTodo = $('<li class="list-group-item" id="note"></li>').text(noteText);
        $('#noteList').append(newTodo);
    });
    NotesNumberMessage()
    alert(numberOfNotes);
};
// End add a new note function

【问题讨论】：

您永远不会更新 numberOfNotes 变量，它是一个数字。并且没有提及该数字是如何得出的。
不要使用变量numberOfNotes，而是在每次需要获取实际数字时使用$('li').length，或者每次使用前更新numberOfNotes
你可以实现你的逻辑并且可以分解成函数。为您创建了一个示例：codepen.io/anon/pen/rEBvxL

标签： javascript jquery html append

【解决方案1】：

您已经声明了一次 numberOfNotes 变量，但从未对其进行更新。

您应该做的是更新NotesNumberMessage 函数中的变量。如果您在其他任何地方都不需要它，请将其从全局声明中删除。

//    N° of notes length
let numberOfNotes = $('li').length; // can be removed;
//   End  N° of notes length

NotesNumberMessage()

// Display N° of notes length
function NotesNumberMessage() {
    // N° of notes length
    let numberOfNotes = $('li').length;
    $('#NumberPostMessage').text(`You have ${numberOfNotes} active notes`);
};
// End display N° of notes length

在测试列表数量时，

alert(numberOfNotes);

像下面这样更新变量，然后警告：

numberOfNotes = $('li').length;
alert(numberOfNotes);

【讨论】：

感谢您的回答！
@MaxPauwels 如果它帮助/解决了您的问题，请随时投票并接受答案。这是 Stackoverflow 的良好做法
嗨托基尔！是的，我试过这个，但它不允许我投票！它告诉我，来自信誉度低于 15 的帐户的投票会被记录下来，但不会公开显示...
啊，可能是你的声望不够。你仍然可以接受答案。那里有一个刻度线。
刚刚做到了！谢谢！

【解决方案2】：

如果您存储了对 ul/ol 的引用，您正在将 li 添加到其中，则每次都可以获得 .children().length 以获取最新计数。

您还应该在点击处理程序中调用NotesNumberMessage()，否则在第一次调用addNode() 之后就永远不会发生这种情况，因为它应该只调用一次，因为它正在创建一个事件绑定。

let $noteList = $('#noteList');

NotesNumberMessage();

function NotesNumberMessage() {
    $('#NumberPostMessage').text(`You have ${$noteList.children().length} active notes`);
};

function addNote() {
    $('#addBtn').on('click', function () {
        let noteText = $('#input').val();
        let newTodo = $('<li class="list-group-item" class="note"></li>').text(noteText);
        $noteList.append(newTodo);

        NotesNumberMessage();
        alert($noteList.children().length);
    });
};

【讨论】：