Question

在使用多维数组时，我很困惑如何在javascript中进行计算，我具有这样的形式

<input type=number name="sell['FRUIT']['YELLOW']">
<input type=number name="stock['FRUIT']['YELLOW']" value=100 disabled>
<input type=number name="newstock['FRUIT']['YELLOW']" disabled>

<input type=number name="sell['WOOD']['BLACK']">
<input type=number name="stock['WOOD']['BLACK']" value=50 disabled>
<input type=number name="newstock['WOOD']['BLACK']" disabled>

<input type=number name="sell['VEGETABLE']['RED']">
<input type=number name="stock['VEGETABLE']['RED']" value=25 disabled>
<input type=number name="newstock['VEGETABLE']['RED']" disabled>

<input type=number name="sell['VEGETABLE']['GREEN']">
<input type=number name="stock['VEGETABLE']['GREEN']" value=40 disabled>
<input type=number name="newstock['VEGETABLE']['GREEN']" disabled>

FRUIT / WOOD / VEGETABLE和COLOR键是从PHP生成的，可以是任何东西，但是在出售，库存和 newstock 数组。

我需要做的是通过从用户输入中减去卖出来减去库存，从而计算值并将其放在 newstock 输入框中。

Answer 1

您可以将change事件处理程序添加到input并更新特定的输入，如下所示：

newStockName使用当前输入的名称获取要更新的输入的名称
$(this).next().val() - $(this).val()获得stock输入和当前sell输入被更改之间的差值

$("input").change(function() {
  const newStockName = this.name.replace("sell", "newstock");
  const difference = $(this).next().val() - $(this).val();
  $(`input[name="${newStockName}"]`).val(difference)
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type=number name="sell['FRUIT']['YELLOW']">
<input type=number name="stock['FRUIT']['YELLOW']" value=100 disabled>
<input type=number name="newstock['FRUIT']['YELLOW']" disabled>

<input type=number name="sell['WOOD']['BLACK']">
<input type=number name="stock['WOOD']['BLACK']" value=50 disabled>
<input type=number name="newstock['WOOD']['BLACK']" disabled>

<input type=number name="sell['VEGETABLE']['RED']">
<input type=number name="stock['VEGETABLE']['RED']" value=25 disabled>
<input type=number name="newstock['VEGETABLE']['RED']" disabled>

<input type=number name="sell['VEGETABLE']['GREEN']">
<input type=number name="stock['VEGETABLE']['GREEN']" value=40 disabled>
<input type=number name="newstock['VEGETABLE']['GREEN']" disabled>

Answer 2

请谨慎使用引号或使用jQuery.escapeSelector：

$(function() {
  $('input[name^="sell"]').on("change", function() {
    var name2 = this.name.replace(/^sell/, "stock");
    var name3 = this.name.replace(/^sell/, "newstock");
    var diff = $('input[name="' + $.escapeSelector(name2) + '"]').val() - $(this).val();
               $('input[name="' + $.escapeSelector(name3) + '"]').val(diff);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type=number name="sell['FRUIT']['YELLOW']">
<input type=number name="stock['FRUIT']['YELLOW']" value=100 disabled>
<input type=number name="newstock['FRUIT']['YELLOW']" disabled>

<input type=number name="sell['WOOD']['BLACK']">
<input type=number name="stock['WOOD']['BLACK']" value=50 disabled>
<input type=number name="newstock['WOOD']['BLACK']" disabled>

<input type=number name="sell['VEGETABLE']['RED']">
<input type=number name="stock['VEGETABLE']['RED']" value=25 disabled>
<input type=number name="newstock['VEGETABLE']['RED']" disabled>

<input type=number name="sell['VEGETABLE']['GREEN']">
<input type=number name="stock['VEGETABLE']['GREEN']" value=40 disabled>
<input type=number name="newstock['VEGETABLE']['GREEN']" disabled>

Answer 3

首先，您没有“多维”数组，您拥有一个name属性，其文本将3个输入匹配在一起，如下所示：

(sell|stock|newstock)(.*?)

如果您可以针对每个输入设置类/数据，则将更加容易，例如：

<input type=number class='sell' data-key1="FRUIT" data-key2="YELLOW">

没有这个，只需解析name=属性就可以得到相同的结果。

遍历每个sell以获取密钥，获取匹配的库存/新库存输入并进行更新。

一个问题是您的名字包含[，]和'，这会导致jquery选择器出现问题，因此您需要先将它们转义。

//alert($("[name=stock\\[\\'FRUIT\\'\\]\\[\\'YELLOW\\'\\]]").length)

$("#btn").click(function() {
  var sell = $("[name^=sell]");

  sell.each(function() {
    // Get key and "fix" for jquery selector (alternate regex possible, simple version here)
     var key = $(this).attr("name").substr(4).replace(/\[/g, "\\[").replace(/\]/g, "\\]").replace(/\'/g, "\\'");

    // find matching stock
    var stock = $("[name=stock" + key + "]").val() * 1;

    var newstock = stock - $(this).val() * 1;

    $("[name=newstock" + key + "]").val(newstock);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type=number name="sell['FRUIT']['YELLOW']" value=5>
<input type=number name="stock['FRUIT']['YELLOW']" value=100 disabled>
<input type=number name="newstock['FRUIT']['YELLOW']" disabled>
<hr/>

<input type=number name="sell['WOOD']['BLACK']" value=5>
<input type=number name="stock['WOOD']['BLACK']" value=50 disabled>
<input type=number name="newstock['WOOD']['BLACK']" disabled>
<hr/>

<input type=number name="sell['VEGETABLE']['RED']" value=5>
<input type=number name="stock['VEGETABLE']['RED']" value=25 disabled>
<input type=number name="newstock['VEGETABLE']['RED']" disabled>
<hr/>

<input type=number name="sell['VEGETABLE']['GREEN']" value=5>
<input type=number name="stock['VEGETABLE']['GREEN']" value=40 disabled>
<input type=number name="newstock['VEGETABLE']['GREEN']" disabled>
<hr/>

<button id='btn'>calc</button>

jQuery：通过键名计算多维数组

3 个答案: