jQuery根据数量动态更新隐藏的输入值

Question

我编写了一些 jQuery 代码来根据用户选择的数量动态更新隐藏的输入值：

$('input[name^="quant"]').change(function () {
       updateTotal();
    });

function updateTotal() {
        var count = 1;
        $('input[name^="quant"]').each(function() {
            var qty = $(this).val();
            var price = $(this).siblings('input[name^="price"]').val();
            $('input[name=item_name_'  + count + ']').val(qty + ' x ' + $('input[name=item_name_'  + count + ']').val());

            count++;
        });
    }

$('input[name=item_name_' + count + ']').val(qty + ' x ' + $('input[name=item_name_' + count + ']').val()); 行通过在末尾附加当前输入值的值来替换整个输入。

例如，如果数量是 4，那么元素将如下所示：

<input type="hidden" name="item_name_1" value="4 x Front Row Seats">

我遇到的问题是这发生在更改时，每次我更改数量时都会这样做：

<input type="hidden" name="item_name_1" value="5 x 4 x Front Row Seats">
<input type="hidden" name="item_name_1" value="3 x 5 x 4 x Front Row Seats">
<input type="hidden" name="item_name_1" value="4 x 3 x 5 x 4 x Front Row Seats">

等等……

有没有办法在我这样做之前保存隐藏输入的值，这样它就不会像这样附加？

Answer 1

我找到了解决这个问题的更好方法。当我尝试设置 PayPal 商品的数量时，我使用了 this approach。

我只需要将数量设置为项目的隐藏输入，而不是像@Rory McCrossan 指出的那样手动尝试创建值来显示它：

<input type="hidden" name="quantity_1" value="1">

Answer 2

检查这个

$('input[name^="quant"]').change(function() {
  updateTotal();
});

function updateTotal() {
  var count = 1;
  $('input[name^="quant"]').each(function() {
    //alert($(this).val());
    var qty = $(this).val();

    $('input[name=item_name_' + count + ']').val(qty + ' x '+'Front Row Seats');

    count++;
  });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <label>Quantity</label>  <input type="text" name="quant"><br />

<label>Result</label>    <input type="text" name="item_name_1" value="">