Question

我在uni中分配了一份工作，仅用HTML和javascript进行购物清单。当我单击li元素时，应该将样式更改为直通。但是，当我尝试执行此操作时，所有li元素都获得了直通，而不仅仅是我单击的元素。我已经尝试了很长时间来解决此问题，现在我的代码根本无法正常工作。请帮助我

这是我的HTML：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<title>Inköpslista</title>
</head>
<body>
<h2>Inköpslista</h2>
    <div>
    <input type="text" id="myInput" placeholder="Ange vara..."/>
    <button onclick="nyttElement()">Lägg till</button>
    </div>

    <ul id="myUL">
        <li>Kakor</li>
        <li>Bullar</li>
        <li style="text-decoration: line-through;">Nutella</li>
     </ul>
    <script src="lista.js"></script>
  </body>
 </html>

这是Javascript ，可将新的li元素添加到我的列表中：

function nyttElement(){
    var newItem = document.createElement("li");
    var item = document.getElementById("myInput").value;
    var text = document.createTextNode(item);
    newItem.appendChild(text);
    document.getElementById("myUL").appendChild(newItem);
}

在我尝试添加eventListener之前，该方法工作正常：

document.getElementById("myUL").addEventListener("click", function{
    var selectLi = document.querySelectorAll("li") 
    for (var i =0; i < selectLi.length; i++){
        selectLi[i].style.textDecoration = "line-through";
        selectLi[i].style.color = "red";
    }

    }
});

任何帮助将不胜感激！

Answer 1

您的click事件侦听器适用于整个无序列表，您正在遍历每个列表项并将其划掉。如果您在每个单独的列表项上监听click事件，则可以删除被单击的特定列表项。

char *read_command(void)
{
    char *line = NULL;   

    ssize_t buf_size = 0; 
    getline(&line, &buf_size, stdin);
    return line;
}

const listItems = document.querySelectorAll('#myUL > li')

function addEventListener(li) {
  return li.addEventListener('click', function() {
    this.className = this.className == 'todo' ? 'done' : 'todo'
  });
}

function nyttElement(){
  var newItem = document.createElement('li');
  var item = document.getElementById('myInput').value;
  var text = document.createTextNode(item);
  newItem.appendChild(text);
  newItem.className = 'todo';
  addEventListener(newItem);
  document.getElementById('myUL').appendChild(newItem);
}

listItems.forEach(li => addEventListener(li))

Answer 2

您需要将click事件附加到ul元素，并使用event.target关键字检查被单击的元素。

注意：：您可能需要阻止使用以下方式提交空白字段：

if (item !== "") {
     //Append the 'li'
}

document.querySelector("#myUL").addEventListener("click", function(e) {
  if (e.target.tagName === 'LI') {
    e.target.style.textDecoration = "line-through";
    e.target.style.color = "red";
  }
});

function nyttElement() {
  var item = document.getElementById("myInput").value;

  if (item !== "") {
    var newItem = document.createElement("li");
    var text = document.createTextNode(item);

    newItem.appendChild(text);
    document.getElementById("myUL").appendChild(newItem);
  } else {
    console.log('Some message in the else clause about filling the empty field.')
  }
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">

  <title>Inköpslista</title>
</head>

<body>
  <h2>Inköpslista</h2>
  <div>
    <input type="text" id="myInput" placeholder="Ange vara..." />
    <button onclick="nyttElement()">Lägg till</button>
  </div>

  <ul id="myUL">
    <li>Kakor</li>
    <li>Bullar</li>
    <li style="text-decoration: line-through;">Nutella</li>
  </ul>
  <script src="lista.js"></script>
</body>

</html>

Answer 3

您不需要遍历所有li。要突出显示单击的li，您必须使用以下事件委托

function nyttElement() {
  var newItem = document.createElement("li");
  var item = document.getElementById("myInput").value;
  var text = document.createTextNode(item);
  newItem.appendChild(text);
  document.getElementById("myUL").appendChild(newItem);
}


document.getElementById("myUL").addEventListener("click", function(e) {
  // if target is li
  if (e.target && e.target.nodeName === 'LI') {
    // toggle done class
    e.target.classList.toggle('done');
  }
});

.done {
  text-decoration: line-through;
  color: red;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">

  <title>Inköpslista</title>
</head>

<body>
  <h2>Inköpslista</h2>
  <div>
    <input type="text" id="myInput" placeholder="Ange vara..." />
    <button onclick="nyttElement()">Lägg till</button>
  </div>

  <ul id="myUL">
    <li>Kakor</li>
    <li>Bullar</li>
    <li>Nutella</li>
  </ul>
  <!--<script src="lista.js"></script>-->
</body>

</html>

单击时仅更改一个<li>元素的样式

3 个答案: