javascript - 如何使每个 元素响应其在 'keypress' 上创建的父输入

Question

我正在用 Vanilla Javascript 编写一个待办事项列表，我想让它在每次有人在前一个输入上按回车键时创建一个新的输入，目前可以正常工作。我还想在其上附加一个复选标记，这样每当任务完成时您都可以单击它，它将更改复选标记旁边输入的背景颜色。唯一的问题是我不知道如何为每个复选标记分配某种类型的值，因此 eventListener 并不总是选择第一个 ID。

尝试为每个复选标记分配一个值并将其放入数组中，但不知道如何实际将每个复选标记的完全相同的值分配到数组中。

let counter, checkmark, cross, list, newRow, addInput, addCheckmark, listid, wrapper, current1;

counter = 1;
checkmark = document.getElementById('checkmark');
cross = document.getElementById('cross');
wrapper = document.querySelector('.to-do-wrapper');
current1 = document.getElementById('current1');

let values = [];

// Event Delegation to listen to all target.matches :)
document.addEventListener('keypress', function(e) {
  if (event.target.matches('.input-new-list')) {
    let randomVal = Math.floor(Math.random() * 100000);
    list = document.querySelector('.list');
    newRow = document.createElement("li");
    addInput = document.createElement('input');
    addCheckmark = document.createElement('i');
    addCheckmark.setAttribute('class', 'fas fa-check');
    addInput.setAttribute('id', 'current-' + counter)
    addInput.setAttribute('class', 'input-new-list');
    addInput.setAttribute('type', 'text');
    newRow.setAttribute('class', 'new-list');
    let key = e.keyCode;
    if (key === 13) {
      list.appendChild(newRow);
      newRow.appendChild(addCheckmark);
      addCheckmark.setAttribute('id', 'checkmark');
      /* addCheckmark.setAttribute('value', randomVal);
      values.push(randomVal); */
      newRow.appendChild(addInput);
      document.getElementById('current-' + counter).focus();
      counter++;
      document.querySelector('#default').removeAttribute('placeholder');
    }
  }
});

// Show edit buttons on click edit list
document.addEventListener('click', function(event) {
  list = document.querySelector('.list');
  newRow = document.createElement("li");
  addInput = document.createElement('input');
  addCheckmark = document.createElement('i');
  // Ad a random value to checkmark -> Push into array. If event.target.matches checkmark value => execute if
  if (event.target.matches('#checkmark')) {
    // On click of checkmark, change input background and toggle checkmark color
    if (event.target.classList !== 'active') {
      checkmark.classList.toggle('active');
      if (document.querySelector('.input-new-list')) {
        document.querySelector('.input-new-list').classList.toggle('checked');
      } else if (document.querySelector('current' + counter)) {
        document.querySelector('#current' + counter).classList.toggle('checked')
      }
    }
  }
});

document.addEventListener('mouseover', function() {
  if (event.target.matches('input')) {
    cross.classList.add('active');
  } else if (!event.target.matches('input')) {
    cross.classList.remove('active');
  }
});

<div class="container-fluid to-do-wrapper" id="toDo">
  <ul class="list">
    <li class="new-list">
      <i class="fas fa-check" id="checkmark"></i>
      <input type="text" placeholder="Create a new list" class="input-new-list" id="default" />
      <i class="fas fa-times" id="cross"></i>
    </li>
  </ul>
</div>

只是寻找一种方法将每个复选标记和输入分配给其父级 li，因此对其进行一些操作不会影响第一个选定的元素，但会影响正在编辑的元素。

Answer 1

我走了一个不同的方向，将数据作为信息存储在 DOM 中，并提供一个函数来按需生成表示待办事项列表数据的 JS 对象。我在回答中使用了 Kamil 的 CSS，并做了一些细微的改动。

const list = document.querySelector('ul.list');

document.addEventListener('keypress', function(e) {
  const eventTarget = e.target;

  if (e.keyCode === 13 && eventTarget.parentElement && eventTarget.parentElement.classList.contains('new-item')) {
    const clonedListItem = eventTarget.parentElement.cloneNode(true);

    clonedListItem.classList.remove('new-item');

    const icons = clonedListItem.querySelectorAll('i');

    icons.forEach(el => el.classList.remove('hidden'));

    const [doneIcon, deleteIcon] = icons;

    doneIcon.addEventListener('click', () => toggleDone(clonedListItem));
    deleteIcon.addEventListener('click', () => deleteItem(clonedListItem));

    list.insertBefore(clonedListItem, eventTarget.parentElement);

    eventTarget.removeAttribute('placeholder');
    eventTarget.value = '';
  }
});

document.getElementById('generateJSON').addEventListener('click', () => {
  const data = [...document.querySelectorAll('ul.list li')]
    .filter(li => !li.classList.contains('new-item'))
    .map(li => ({
      text: li.querySelector('input[type="text"]').value,
      done: li.classList.contains('done')
    }));

  console.log('data', data);
});

function toggleDone(item) {
  item.classList.toggle('done');
}

function deleteItem(item) {
  item.remove();
}

ul {
  list-style-type: none;
}

.fas {
  cursor: pointer
}

li.done input[type="text"] {
  background: #dfd
}

.input-new-list {
  margin: 5px
}

li i.fa-check::after {
  content: '[+]'
}

li.done i.fa-check::after {
  content: '[-]'
}

.hidden {
  display: none;
}

<ul class="list">
  <li class="new-item">
    <i class="fas fa-check hidden"></i>
    <input type="text" placeholder="Create a new list" />
    <i class="fas hidden" id="cross">x</i>
  </li>
</ul>

<input type="button" id="generateJSON" value="Generate JSON" />