在页面加载和每次单击某些按钮时运行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');
    };

我需要添加什么才能使其工作？我确实看了这个类似问题的答案(在页面加载时运行一次代码,然后每次单击一个按钮时),但它们似乎没有帮助.任何帮助将不胜感激!

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