javascript - jQuery:通过键名计算多维数组

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

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