Question

我想切换一个列表项以显示。当我单击它时，我希望一个勾号图标随着点击而切换。它适用于1个<li>项目，但是当我添加另一个项目并单击该项目时，第一个刻度消失。

如何在单击第二个滴答声后使第一个滴答声保持不变？这是特定于DOM的练习。

我首先要设置一个事件侦听器，以提交表单。提交后，我将创建一个div和一个li。然后在li上单击，然后添加图标。

html：

<div class='body-container'>
    <p class="subtitle">Please add an item</p>

    <form id="myForm" class='form'>
        <input type="text">
        <button type="submit">submit</button>
    </form>

    <h2>Items</h2>
    <div>
        <ol class="item">

        </ol>
    </div>
    <div class="footer">

    </div>
</div>

js：

//grab the target from the form submission
const myForm = document.querySelector('#myForm');
const item = document.querySelector('.item');
const ol = document.querySelector('ol');
const i = document.createElement('i')

myForm.addEventListener('submit', (event) => {
  event.preventDefault();
  const value = event.target[0].value;
  const li = document.createElement('li');
  const div = document.createElement('div');
  li.classList.add('test');

  li.addEventListener('click', () => {
    div.classList.toggle('strike');
    div.appendChild(i);
    i.classList.toggle('fas');
    i.classList.toggle('fa-check');
  })

  li.appendChild(document.createTextNode(value));
  div.appendChild(li)
  ol.appendChild(div)    
})

当我勾选第二项时，两个李的消失都消失了

Answer 1

这是实现它的方法，您的代码几乎是正确的

const myForm = document.querySelector('#myForm');
const item = document.querySelector('.item');
const ol = document.querySelector('ol');

myForm.addEventListener('submit', (event) => {
event.preventDefault();
const value = event.target[0].value;
const li = document.createElement('li');
const div = document.createElement('div');
const i = document.createElement('i');
li.id = `item-${new Date().getTime()}`
li.classList.add('test');

li.addEventListener('click', () => {
    div.classList.toggle('strike');
    div.appendChild(i);
    i.classList.toggle('fas');
    i.classList.toggle('fa-check');
})

    li.appendChild(document.createTextNode(value));
    div.appendChild(li)
    ol.appendChild(div)    
})

Answer 2

Evandro Cavalcate Santos，您好，我只是想改变思路

const i = document.createElement('i')

就像您对myForm eventListener一样，因为它是使用全局范围创建的，并且每个div都引用相同的全局“ i”。我认为每个li都不需要'id'。让我知道。谢谢

//grab the target from the form submission
const myForm = document.querySelector('#myForm');
const item = document.querySelector('.item');
const ol = document.querySelector('ol');


myForm.addEventListener('submit', (event) => {
  event.preventDefault();
  const value = event.target[0].value;
  const li = document.createElement('li');
  const div = document.createElement('div');
  const i = document.createElement('i')
  li.classList.add('test');
  

  li.addEventListener('click', () => {
    div.classList.toggle('strike');
    div.appendChild(i);
    i.classList.toggle('fas');
    i.classList.toggle('fa-check');
  })

  li.appendChild(document.createTextNode(value));
  div.appendChild(li)
  ol.appendChild(div)    
  
})

i.fas:after{
  content: "X"
}
.strike{
  border:1px solid red;
}

<div class='body-container'>
    <p class="subtitle">Please add an item</p>

    <form id="myForm" class='form'>
        <input type="text">
        <button type="submit">submit</button>
    </form>

    <h2>Items</h2>
    <div>
        <ol class="item">

        </ol>
    </div>
    <div class="footer">

    </div>
</div>

如何使图标在点击事件上与<li>一起切换

2 个答案: