Question

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

在注释列表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

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

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

附加Javascript后元素数保持不变

2 个答案: