如何使每个<i>元素响应其在"按键"上创建的父输入

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

i有点朝着不同的方向发展，将数据作为信息存储在DOM中，并提供一个函数来生成一个按需表示TODO列表数据的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" />

Answer 2

您可以通过添加/删除类来'分配值'。对于许多元素，请勿使用相同的id。尝试使用<template>进行更改和单独的视图和数据，如下所示

let list= [{text:'', done: false}]; // data
function show() {
  toDo.innerHTML = list.map((x,i)=> inject(item.innerHTML,{
    check: x.done ? 'fa-check' : 'fa-uncheck',
    done: x.done ? 'done' : '',
    hide: i ? '' : 'hide',
    text: x.text,
    i,
  })).join('');
}
function inject(str, obj) { return str.replace(/${(.*?)}/g, (x,g)=> obj[g]) }
function check(i) { list[i].done = !list[i].done; show(); }
function change(inp,i) { list[i].text = inp.value; }
function del(i) { list.splice(i,1); show(); }
function newItem(i) {
  list.splice(i+1,0,{text:'',done: false});
  show();
  this['inp'+(i+1)].focus();
}
show();

ul{ list-style-type: none; }
.fas { cursor: pointer }
.done { background: #dfd }
.input-new-list {margin: 5px}
.fa-check::after { content: '[+]'}
.fa-uncheck::after { content: '[-]'}
.hide { display: none }

Click on left '[-]' to mark task as done, type enter to add new, click 'x' to delete
<div class="container-fluid to-do-wrapper">
  <ul class="list" id="toDo"></ul>
</div>
<template id="item">
  <li class="new-list">
    <i class="fas ${check}" 
       onclick="check(${i})"></i>
    <input type="text" placeholder="Create a new list"
           class="input-new-list ${done}" 
           value="${text}" id="inp${i}"
           onchange="newItem(${i})" 
           oninput="change(this, ${i})"/>
    <i class="fas fa-times ${hide}" onclick="del(${i})">x</i>
  </li>
</template>