jQuery - 输入值更改时更新变量答案

【问题标题】：jQuery - update variable when input values changedjQuery - 输入值更改时更新变量
【发布时间】：2013-11-21 10:16:28
【问题描述】：

我想使用 jQuery 来更新一个变量（目前是一个 PHP 变量，但显然它需要是一个 js 变量。）这样当用户在多个输入字段中更改值时，它会创建一个动态的运行总计变化。

理想情况下，它也会在大于上限时发出警告。

当前代码：

<?php
$counter = 0;
$expected_qty = 24;
?>

<div class="jumbotron text-center">
    <p>Running Total:</p>
    <h2>
        <span class='running_total'>
            <?php print $counter; ?>
        </span> / <span class='max_qty'>
            <?php print $expected_qty; ?>
        </span>
    </h2>
</div>

<div class="col-xs-12 col-sm-8 col-md-9">
    <div class="table-responsive">
        <table class="table">
          <tr>
            <td>
              <input class='qty_field' type='number' name='input1' value=''/>
            </td>
          </tr>
          <tr>
            <td>
              <input class='qty_field' type='number' name='input2' value=''/>
            </td>
          </tr>
        </table>
    </div>
</div>

目前在blur上运行的jQuery如下：

$('body').on('blur', '.qty_field', function () {
var sum = 0;
$('.qty_field').each(function() {
    sum += Number($(this).val());
});
//Write sum to run
    $('running_total').html(sum);


});

我希望

虽然在示例中没有实现，但有动态添加更多表格行的功能，但脚本已经考虑到了这一点

编辑 - 更新了更多细节...

【问题讨论】：

请提供你用过的jquery代码
我还没有实现 jQuery。我在问怎么做。

标签： javascript php jquery

【解决方案1】：

通过对 JS 和 HTML 进行一些调整，以下代码可以运行...

$('body').on('keyup', '.qty_field', function () {
var sum = 0;
$('.qty_field').each(function() {
    sum += Number($(this).val());
});

    $('.running_total').html(sum);
});

【讨论】：

【解决方案2】：

这是一个使用AngularJS的典型案例。看看那个。使用 jQuery 实现这一点将是一件可怕的事情。使用 Angular，只需几行代码。

【讨论】：

谢谢，现在正在查看 Angular。