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会更好，因为每个文档的ID应该是唯一的：）

Answer 2

我想也许你的这个＆＃39;不是指你认为它在这一行中的含义：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在给定文档中必须是唯一的。您的ID [{1}}重复次数与表格中的行数相同，这会使您的theodds无效！删除那些HTML，你可以解决你已经拥有的数据*。

ID

获取look at this fiddle演示。

jQuery计算一次更新一行

3 个答案: