jQuery: вычислить многомерный массив по ключу - PullRequest
Новая
       14

jQuery: вычислить многомерный массив по ключу

0 голосов
/ 19 февраля 2019

я запутался, как делать вычисления в 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, это может быть что угодно, но будет иметь тот же ключ и подраздел на этом продать , stock и newstock * массив 1013 *.

Мне нужно вычислить и поместить значение в поле ввода newstock путем вычитания акции с продажи из пользовательского ввода.

Ответы [ 3 ]

0 голосов
/ 19 февраля 2019

Во-первых, у вас нет «многомерного» массива, у вас есть свойство 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>
0 голосов
/ 19 февраля 2019

Либо будьте осторожны с кавычками, либо используйте 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>
0 голосов
/ 19 февраля 2019

Вы можете добавить обработчик событий 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>
...