Question

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

每个项目都有一个删除按钮，当我删除一个项目时，我希望我的号码更新，但它没有。

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

我有两个问题：

1）我故意将该功能置于文件就绪功能之外，以便我可以重复使用它。使用countItems.init();正常运行，但不能以这种方式使用它：

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

为什么？

2）当我删除项目以刷新countItems.init();个项目时，如何让它再次执行li功能？

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

Answer 2

对代码进行一些重构，并在每次删除项目时调用basketItems.count()：

var basketItems = {
    count: function() {
        $('.items').text($('.cart li:visible').length);
    }
};
$(document).ready(function() {
    basketItems.count();
    $('.remove-item').on('click', function() {
        $(this).closest('li').remove();
        basketItems.count();
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="basket">
  my basket
  <span class="items"></span>
    <ul class="cart">
      <li>phone | <a href="#" class="remove-item">x</a></li>
      <li>cartridge | <a href="#" class="remove-item">x</a></li>
      <li>neogeo | <a href="#" class="remove-item">x</a></li>
    </ul>
</div>

<br>
<br>
<br>
<img src="http://placehold.it/200x200" alt="product"><br>
<a href="#">add</a>

Answer 3

为变量分配值而不是表达式。含义表达式：$（“。cart li：visible”）。长度由javascript解释为整数值3而不是$（“。cart li：visible”）。length

通过将basketItems变量声明移动到init函数内部，确保每次运行函数时都获取当前长度，而不是仅在首次初始化页面时。

要获取更新的计数，您需要在remove-item click事件中运行init函数，就像您尝试过一样。所以更新的javascript和小提琴看起来像这样：

var countItems = {
    init: function() {
      var basketItems = $(".cart li:visible").length;
      $(".items").text(basketItems);
    }
  }

$(document).ready(function(){

  countItems.init();

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

});

https://jsfiddle.net/1a60qh5k/

点击可见元素

3 个答案: