JQuery函數提供舊數據

Question

我有以下JQuery允許用戶選擇/取消選擇項目/價格列表作爲創建自動報價的一種方式。代碼如下所示：

$('table.products > tbody > tr').click(function(){ 
    if ($(this).find('div.price').is(":visible")) { 
     $(this).find('div.price, img.selected').fadeOut(100); 
    } else { 
     $(this).siblings('div.price, img.selected').fadeIn(100);      
    } 
    recalc(); 
}); 

它實際上比這更復雜（因此我之所以沒有使用toggle()但上面的是這個問題的目的，只是一個簡單的例子

反正。上面的代碼工作正常如果表格行被點擊，然後價格和圖像被選中/取消選擇取決於他們是否價格已經顯示或沒有

然後我有一個函數調用recalc();在結束..它看起來像這樣（再次，這是一個簡化版本）：

function recalc() { 
    var numOfProducts = $('table.products div.price:visible').length; 
    alert(numOfProducts); 
} 

我有這裏的問題是，警報總是返回那會是什麼正確的變更前的值。

例如，如果沒有div.price可見的，我選擇一個，一個將成爲可見的，但該警報顯示0。然後，如果我選擇另一個，這使得2可見，但警報僅顯示1，因爲這是我點擊時的情況。如果我然後單擊我已經點擊的項目之一以取消選擇它，它將顯示2

所以，我的問題是我應該如何確保函數調用在所有其他操作完成後發生？

Answer 1

我來了得出的結論是我的方法是完全錯誤的。我將這部分基於這樣的事實：沒有多少人提出了這個問題的答案，部分原因是我收到的答案沒有達到我想要做的。也許我的解釋也不夠清楚。

所以，我解決我的原讓所選產品的行數的準確報告的問題是JS創建一個全局變量，像這樣：

window.config = 
    { 
     products : 0, 
    }; 

然後，添加行if語句遞增或遞減取決於所發生的變化：

$('table.products > tbody > tr').click(function(){ 
    window.config.products = window.config.products - 1; // Decrement 
    if ($(this).find('div.price').is(":visible")) { 
     $(this).find('div.price, img.selected').fadeOut(100); 
    } else { 
     window.config.products = window.config.products + 1; // Increment 
     $(this).siblings('div.price, img.selected').fadeIn(100);      
    } 
}); 

現在我有，我可以隨時訪問，繼續我的應用程序發展的全局變量選擇的產品數量的準確記錄。

Answer 2

這是因爲recalc()在動畫完成之前被調用，因此元素仍然可見。

您有兩種選擇。首先是擺脫動畫：

$('table.products > tbody > tr').click(function(){ 
    if ($(this).find('div.price').is(":visible")) { 
     $(this).find('div.price, img.selected').hide(); 
    } 
    else { 
     $(this).siblings('div.price, img.selected').show();      
    } 
    recalc(); 
}); 

二是調用recalc()每個褪色的回調，所以它發生在動畫完成後：

$('table.products > tbody > tr').click(function(){ 
    if ($(this).find('div.price').is(":visible")) { 
     $(this).find('div.price, img.selected').fadeOut(100, recalc); 
    } 
    else { 
     $(this).siblings('div.price, img.selected').fadeIn(100, recalc);      
    }   
});