jQuery計算一次更新一行

Question

因此，我試圖創建一個小表，用於計算每隻鴨子有一定賠率時在橡皮鴨競賽上下注的潛在收益。

我有點有這個工作，但都創下了絆腳石......

頁面加載所有的數學是基於£10的默認值正確。然後我想要做的是允許人們改變他們想要每個鴨子下注的金額，並且該鴨子的潛在獎金只會自動更新。

這是我到目前爲止有：

function calculate_odds(row) { 
    var winnings = 0; 
    // Set winnings to 0 

    var odds = $(row).find('#theodds').attr('data-duckodds'), 
    // Find the value of the data attribute for a specific td 

    betting_amount = $('[name="betting-amount"]').val(), 
    // Find the value entered into an input field 

    winnings = (parseFloat(odds)/1 + 1) * betting_amount; 
    // Work out the winnings based on the odds given. 
    // Divide first number by 1 as all odds are something to 1 for now, then +1 
    // Multiply that number by the bet 
    // For example Bet 30 on 3/1 odds 
    // 3/1 = 3 + 1 = 4 * 30 = 120 

    $(row).find('.js-winnings').html(winnings.toFixed(2)); 
    // Show the winnings amount in the final td in each row  
} 

$(document).ready(function() { 
    $('.lineup tbody tr').each(function() { 
     // Run the function calculate_odds() initially based on the default value; 
     calculate_odds(); 

     $(this).find('[name="betting-amount"]').on('keyup', function() { 
      // Now loop through each row and change the winnings amount if the betting amount is changed  
      calculate_odds($(this).closest('tr')); 
     }).trigger('keyup'); 
    }) 
}); 

從我的理解（我的jQuery是不是很大），這條線內：$(this).find('[name="betting-amount"]').on('keyup', function() {所有我需要做的是選擇特定行我想更新。這應該是簡單的權利？

取而代之的是從第一行獲取更新後的值，然後在更改後面的行時應用。

任何人都可以指出我們要出錯的地方嗎？你可以在這裏看到計算器：http://www.kb-client-area.co.uk/ducks/races/race-1/

感謝提前:)

Answer 1

您遇到的特定問題就是你設置betting_amount：

betting_amount = $('[name="betting-amount"]').val() 

您正在全局查找文檔，因此找到第一個實例。 它切換到這使得它的工作：

betting_amount = $(row).find('[name="betting-amount"]').val() 

順便說一句：這將是更好地使用，而不是爲#theodds的ID一類，如標識應該是每個文檔:)

Answer 2

我想也許你的「本」是不是指它是在這條線，你想什麼：calculate_odds($(this).closest('tr'));

你能嘗試沿着線的東西：

$(this).find('[name="betting-amount"]').on('keyup', function(e) { 
      // Now loop through each row and change the winnings amount if the betting amount is changed  
      calculate_odds($(e.target).closest('tr')); 
     }).trigger('keyup'); 
    }) 

Answer 3

獨特

正如我前面所說，元素ID在給定的文檔中必須是唯一的。您的編號爲theodds的重複次數與表格中的行數相同，因此您的HTML無效！刪除那些ID s，你可以解決你已有的數據。

function calculate_odds(row) { 
    row = $(row); 
    var winnings = 0, 
     //find the data-* from within the context of the keyup - the row 
     odds = row.find('[data-duckodds]').attr('data-duckodds'), 
     //find the entered amount from within the context of the keyup - the row 
     betting_amount = row.find('[name="betting-amount"]').val(), 
     //Your math 
     winnings = (parseFloat(odds)/1 + 1) * betting_amount; 
    row.find('.js-winnings').html(winnings.toFixed(2)); 
} 

$(document).ready(function() { 
    //You don't need an each loop here as the keyup will be triggered on every amount box on load as well. 
    $('.lineup').on("keyup", "[name='betting-amount']", function() { 
     calculate_odds($(this).closest('tr')); 
    }) 
    .find("[name='betting-amount']").keyup(); 
}); 

以look at this fiddle作爲演示。