Question

我有一个ul有多个列表项，我正在使用jQuery：

计算列表项数
将该值输出到其他div
如果该值大于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

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

E.g：

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

Answer 2

//Keep this function outside of document ready to avoid anonymous function.     
function updateDiv(){
var totalItems = $('ul#myList li').length;
    $('#outputText').text(totalItems);
    if (totalItems > 13) 
        {
        $('#outputText').css('color','#F0402B');
        }
    }

$(document).ready(function() {
   // do stuff when DOM is ready
   updateDiv();
   $('.delete').click(updateDiv());
   $('.add').click(updateDiv());
 });

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

2 个答案: