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

【问题标题】：jQuery: Calculate multidimensional array by keynamejQuery：通过键名计算多维数组
【发布时间】：2019-02-19 12:06:00
【问题描述】：

我很困惑如何在使用多维数组时在 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 数组。

我需要做的是通过从用户输入中减去 stock 和 sell 来计算并输入 newstock 输入框的值。 p>

【问题讨论】：

到目前为止你有什么尝试？
name= 属性之外是否有数组维度列表（水果/木材/蔬菜/黄色/黑色/reg/绿色）？你能修改HTML吗？（是你的还是第三者）？
是的，我有，因为我是从 php 生成的

标签： javascript jquery arrays css-selectors inputbox

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：