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 数组。

我需要做的是通过用 sell 减去 stock 计算并将值放入 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

首先，您没有 "multi-dimension" 数组，您有一个名称属性，其文本匹配 3 个输入，如：

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

如果你可以针对每个输入设置classes/data，那就容易多了，例如：

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

没有这个，你可以得到同样的东西，只是通过解析 name= 属性。

遍历每个 sell 以获取密钥，获取匹配的 stock/newstock 输入并更新。

一个问题是您的名字包含 [、] 和 '，这会导致 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>

Answer 3

要么小心引号，要么使用 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>

jQuery：通过keyname计算多维数组

jQuery: Calculate multidimensional array by keyname

javascript

arrays

jquery

css-selectors

inputbox