javascript - 在点击时计算可见元素

我有已经有一些物品的购物车。在加载时，我的脚本会计算我有多少，并在带有数字的div中显示它。

每个项目都有一个删除按钮，当我删除一个项目时，我希望我的号码可以更新，但事实并非如此。

这是我的小提琴：https://jsfiddle.net/vlrprbttst/99c8gn7k/7/

我有两个问题：

1）我有意将函数放在文档就绪函数之外，以便我可以重用它。使用countItems.init();可以在onload上正常工作，但不能以这种方式使用它：

  $(".remove-item").on("click",function(){
    $(this).closest("li").hide();
    countItems.init();
  });

为什么？

2）当我删除一个项目以刷新countItems.init();个项目的数量时，如何使其再次执行li功能？

最佳答案

您正在不断设置页面加载时可见元素的计数。使用filter()方法获取可见元素

采用

var basketItems = $(".cart li"); //Store the reference of element
var countItems = {
    init: function() {
        //
        var visbleElements = basketItems.filter(":visible").length;
        $(".items").text(visbleElements);
    }
}

Fiddle

关于javascript - 在点击时计算可见元素，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/37396041/