點擊計數可見元素

我有購物車，裏面有一些物品。在加載時，我的腳本統計了我有多少，並將它顯示在一個帶有數字的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

點擊計數可見元素

回答

相關問題