点击计数可见元素

我有购物车，里面有一些物品。在加载时，我的脚本统计了我有多少，并将它显示在一个带有数字的div中。点击计数可见元素

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

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

我有两个问题：

1）我一直故意把该函数的文档准备功能之外，这样我可以重复使用。使用countItems.init();工作得很好，但不能使用这种方式：

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

为什么？

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

来源

2016-05-23 valerio0999

你永远更新'basketItems'新长度。 –

正确如此..如果我离开文档准备好的变量，它只是“扫描”一次，并保持那样？一些技术性的解释会很棒:) – valerio0999

你刚才自己解释过。您将值保存一次，但不会更新。您没有为该变量创建“实时”连接。您只为它分配了一个时间值。 –

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

使用

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

Fiddle

来源

2016-05-23 16:28:21 Satpal

在你的代码中重构，并呼吁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>

来源

2016-05-23 16:48:59

变量被分配一个值而不是表达式。意义表达式：$（“。cart li：visible”）。javascript被解释为整数值3不是$（“。cart li：visible”）。length

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

要获取更新的计数，您需要在remove-item点击事件中运行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/

来源

2016-05-23 16:56:14 Stonehenge

点击计数可见元素

回答

相关问题