javascript - 在页面加载和每次单击某些按钮时运行 jQuery 函数

Question

我有一个包含多个列表项的 ul，我正在使用 jQuery 来:

1. 统计列表项的个数
2. 将该值输出到不同的 div
3. 如果该值大于 13，则更改输出文本的颜色

在不同的 div 中，我有多个类为 .add 或 .delete 的按钮。毫不奇怪，单击这些按钮可添加或删除列表项。

jQuery 函数在页面加载时完美运行，但我还想做的是每次单击上述按钮之一时更新此计数。

这是我现有的代码:

    var totalItems = $('ul#myList li').length;
    $('#outputText').text(totalItems);
    if (totalItems > 13) {
        $('#outputText').css('color','#F0402B');
    };

我需要添加什么才能使这项工作正常进行？我确实看过这个类似问题的答案 ( Run code once on page load, then every time a button is clicked )，但它们似乎没有帮助。任何帮助将不胜感激!

Answer 1

如果我遗漏了什么，我深表歉意，但基本上:只需将代码包装在一个函数中，在页面加载时调用该函数，并在处理按钮点击后调用该函数。

例如:

// The function
function updateTotalItems() {
    var totalItems = $('ul#myList li').length;
    $('#outputText').text(totalItems);
    if (totalItems > 13) {
        $('#outputText').css('color','#F0402B');
    };
}

// Call on page load
$(updateTotalItems);

// Presumably you're setting up click handlers
$(".add, .delete").click(function() {
    // Process the add or delete action

    // Update the total
    updateTotalItems();
});