Question

我对我正在努力解决的当前项目感到困惑。我能够在控制台中打印出我想要的确切结果，但我无法弄清楚如何将这些结果插回到表中各自的tds。

var calc    = $('.calc'),
    odds    = $('.weight');

$(document).on('keyup keydown', '.calc', function(e){
    var curVal = calc.val();

    $(document).find('.weight').each(function(){
        var oddsVal = ($(this).text() / curVal);
        console.log(oddsVal);
    });
});

我正在尝试将权重列的每个单元格中的文本除以input.calc，同时用户将数据输入到输入中，以便实时更新。

您可以see a Fiddle of it here，结果打印到控制台。如何才能使重量列中的每个单元格更新？

提前感谢您的帮助！

Answer 1

问题是在输入值之前，单元格会更新，这会导致“Infinity”被创建4次。您甚至可以在控制台日志中看到它。

相反，在执行函数之前，请确保calc中有一个值。

此外，如果您反复更改计算字段，它将根据新替换的值执行新计算，这似乎不是正确的行为。因此，相反，在页面加载时捕获原始值并使用计算中的原始值：

var originalWeights = getOriginalWeights();

function getOriginalWeights() {
    var weights = [];
    $('.weight').each(function(index) {
    weights[index] = $(this).text();
  });
  return weights;
}

$(document).on('keyup keydown', '.calc', function(e){
    if (!calc.val()) return;
    var curVal = calc.val();

    $(document).find('.weight').each(function(index){
        var oddsVal = (originalWeights[index] / curVal);
        $(this).text(oddsVal);
    });
});

Fiddle

Answer 2

要解决此问题，您必须编辑HTML和JS代码。您应该将原始值存储在data属性中，然后使用jquery每个函数的value参数在循环内打印它。这是你的小提琴编辑，希望它有所帮助！

http://jsfiddle.net/ch1qui/LoLrotkn/3/

Answer 3

您应该从事件委派中删除keydown事件，因为keydown期间输入框上的值不可用。同时拥有keyup和keydown会同时触发事件，触发每个块两次。此外，您无需全局声明var calc = $('.calc'),，因为该元素在文档的事件目标期间可用。

$(document).on('keyup', '.calc', function(e){
        var curVal = $(this).val(); 
    $('table td.weight').each(function(){
         var oddsVal = $(this).text() / curVal;
         alert(oddsVal);
    });
});

示例：http://jsfiddle.net/LoLrotkn/4/

将列除以输入值

3 个答案: