Почему неправильно группируются инпуты?

Question

[Genri_Rus]

Вот пример: https://codepen.io/Genri_Rus/pen/YzZoYWK

Сейчас при нажатии на кнопку сгруппировать, ниже появляются соответствующие поля.

Но почему они немного неправильно группируются ?

Если выбрать одну группу, то все нормально, а если несколько то массив arrNameInput добавляет неправильно

Answer 1

[Александр]

$('.form').on('submit', function (e) {
  e.preventDefault();
  const values = {};
  
  $('.form__check').each(function () {
    if ($(this).is(':checked')) {
      const [name, ...keys] = $(this).attr('name').split('-');
      if (name) {
        (values[name] ??= []).push(keys.join('-'));
      }
    }
  });
  
  for (const key in values) {
    $(`.inputs__value--${key}`).text(values[key].join(','));
  }
});

Comments

[Genri_Rus]

Спасибо большое, а как это будет на es5 выглядеть ?

Или babel может переконвертировать в старый синтаксис ?

[Александр]

Genri_Rus, Babel то сможет, но и Вы должны понимать как это работает. const и let на var заменятся (если старые браузеры поддерживать), шаблонная строка на обычную конкатенацию, ??= проверка на undefined. Самое сложное - rest-операция и деструктуризация, вот там Babel превосходно справится. (Либо можете вернуть старую операцию со splice).

[Genri_Rus]

Александр, а где splice добавить ?

Получается в цикле for ?

[Александр]

Genri_Rus, нет, у Вас уже был код со splice, можно ещё так

$('.form').on('submit', function (e) {
  e.preventDefault();
  var values = {};

  $('.form__check').each(function () {
    if ($(this).is(':checked')) {
      var splitted = $(this).attr('name').split('-');
      var name = splitted[0];
      var value = splitted.slice(1).join('-');

      if (name) {
        if (!(name in values)) {
          values[name] = [];
        }
        values[name].push(value);
      }
    }
  });

  for (var key in values) {
    $('.inputs__value--' + key).text(values[key].join(','));
  }
});

[Genri_Rus]

Александр, Спасибо вам большое !