爲什麼此功能在頁面加載時不運行？

這是一個簡單的問題，我已經編寫了一個簡單的計算函數，它完美地工作，儘管我遇到了一個問題，因爲它僅適用於.change（）方法，並且不會在加載文檔時使用。我編寫的這個函數依賴於包含在頁腳中的數字庫。爲什麼此功能在頁面加載時不運行？

$(document).ready(function() { 

    function compute() { 
    var row = $(this).closest('tr'); 

    var price = parseFloat($('.price', row).val().replace(',', '.')); 

    var quantity = parseFloat($('.quantity', row).val(), 10); 
    var total = price * quantity; 
    totalCleaned = numeral(total.toFixed(2)).format('0,0.00'); 
    $('.total', row).html(totalCleaned); 

    var grandTotal = 0; 
    var totalsum = 0; 
    $('.total').each(function() { 
     totalsum += numeral().unformat($(this).text()); 
     grandTotal = numeral(totalsum.toFixed(2)).format('0,0.00'); 
     $('.net-total').html(grandTotal); 
    }); 

    console.log(grandTotal); 

} 

compute(); // this is where I am trying to start the function on load 
$('.price, .quantity').change(compute); 


});

來源

2015-09-24 Svedr

什麼是'$（this）'應該是？當你第一次調用compute（）時，'$（this）'將等於整個DOM - 不知道它最接近'tr'元素是什麼，但它可能不是你想要的目標。 –

井把戒備（排）; var row = $（this）.closest（'tr'）;並看看你得到了什麼 – dansasu11

「包含在頁腳中」。在你有'document.ready（）'之前，你不應該加載這個庫嗎？ –

可以觸發與change()初始狀態的變化。這爲呼叫保留了正確的this範圍：

例如

$('.price, .quantity').change(compute).change();

但代碼需要在同一範圍內的函數調用，也可以不看功能：

$(document).ready(function() { 
    function compute() { 
     // Snip... 
    }); 
    $('.price, .quantity').change(compute).change(); 
});

從技術上講，你可能不想觸發的所有比賽中，哪種情況下的觸發器更改只有first：

$('.price, .quantity').change(compute).first().change();

來源

2015-09-24 10:53:29

，因爲它僅與.change（）方法，工作並沒有當文檔被裝載

你的功能是指this：

... 
var row = $(this).closest('tr'); 
...

調用時從.change處理程序，這意味着this這基本上是「已改變的元素」 - 所以你的方法工作得很好。

當沒有這個環境下調用時，this沒有相關的含義 - 它幾乎肯定是指window。

來源

2015-09-24 10:45:14 Jamiec

嗯，任何工作，我有一個表有多行，每一行都有一個輸入與金額和輸入與價格。謝謝Jamiec的解釋 – Svedr

$(this)對應於當前對象/元素。當您的功能在.ready()內時，$(this)與該文檔無關並且指向該文檔。

當從.change()事件調用相同時，$(this)現在對應於已更改的元素，因此它工作。

要使它在.ready()中工作，您需要首先找到與特定元素最接近的tr，而不是$(this)。爲此，您可以使用Id並聲明像明智的功能。

來源

2015-09-24 10:48:55 Tushar

你保持你的函數定義出的document.ready（）的側面，如下

$(document).ready(function() { 
    compute(); // this is where I am trying to start the function on load 
$('.price, .quantity').change(compute); 
}); 
function compute() { 
var row = $('.price, .quantity').closest('tr'); 

var price = parseFloat($('.price', row).val().replace(',', '.')); 

var quantity = parseFloat($('.quantity', row).val(), 10); 
var total = price * quantity; 
totalCleaned = numeral(total.toFixed(2)).format('0,0.00'); 
$('.total', row).html(totalCleaned); 

var grandTotal = 0; 
var totalsum = 0; 
$('.total').each(function() { 
    totalsum += numeral().unformat($(this).text()); 
    grandTotal = numeral(totalsum.toFixed(2)).format('0,0.00'); 
    $('.net-total').html(grandTotal); 
}); 

console.log(grandTotal); 

}

來源

2015-09-24 10:49:13 katamaraju

爲什麼此功能在頁面加載時不運行？

回答

相關問題