Как по клику добавлять новые значения в поле?

Question

[Сергей Шилов]

Привет! Мне необходимо через запятую добавлять и удалять значение в поле, делаю это так:

$('.item').click(function() {

    var item = $(this),
          itemTitle = item.find('.item-title').text(),  
          hiddenField = $('.hidden_field');

    item.toggleClass('active'); 
    hiddenField.val(extractField.val() + itemTitle);

});

но он просто меняет значение в value, а вот удалять из поля вообще не знаю как. Делал кто подобное?

Answer 1

[0xD34F]

Перезаписывайте значение целиком - то есть, при клике на любой элемент надо обойти и все остальные, которые активны, и получить данные из них:

const inputSelector = '.hidden_field';
const itemSelector = '.item';
const activeClass = 'active';


// как это может выглядеть с использованием jquery
const $items = $(itemSelector).click(function() {
  $(this).toggleClass(activeClass);
  $(inputSelector).val($items
    .filter(`.${activeClass}`)
    .get()
    .map(n => $(n).text())
    .join(', ')
  );
});

// или, к чёрту jquery
const items = [...document.querySelectorAll(itemSelector)];
items.forEach(n => n.addEventListener('click', onClick));

function onClick() {
  this.classList.toggle(activeClass);
  document.querySelector(inputSelector).value = items
    .filter(n => n.classList.contains(activeClass))
    .map(n => n.innerText)
    .join(', ');
}

Comments

[Сергей Шилов]

Великолепное и изящное решение, но мой uglify в gulp не хочет это компилировать, это связано с es6 ?

[0xD34F]

Понятия не имею. Подозреваете, что виноват es6 - попробуйте переписать код без его использования.