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

Question

我的购物车里已经有一些元素。在加载时，我的脚本会计算我有多少个并将其显示在带有数字的 div 中。

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

这是我的 fiddle :https://jsfiddle.net/vlrprbttst/99c8gn7k/7/

我有两个问题:

1) 我特意将函数放在文档就绪函数之外，以便我可以重用它。使用 countItems.init(); 可以正常加载，但不能以这种方式使用:

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

为什么？

2) 当我删除一个项目以刷新 li 项目的数量时，如何让它在单击时再次执行 countItems.init(); 函数？

Answer 1

您在加载页面时连续设置可见元素的数量。使用 filter()获取可见元素的方法

使用

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

Fiddle