jQuery：按keyname计算多维数组

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动态生成的，它可以是任何东西，但在该sell，stock和newstock数组上将具有相同的键和子键。

我需要做的是通过用来自用户输入的卖出减去股票来计算并将价值放在新股票输入框上。

Answer 1

要小心引号或使用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 2

您可以将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 3

首先，您没有“多维”数组，您有一个名称属性，其文本与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>