TodoList 網頁，比 mouseovert/out 更好的事件監聽器？ 為什么我的偽元素 ::first-letter 不起作用？

Question

您好，感謝您的光臨。

我的應用程序有一個主要問題。 我認為當我將光標放在垃圾桶圖標上時，mouseout 和 mouseover 事件偵聽器會瘋狂地觸發，但我不知道為什么。 它會出現故障並且無法正確單擊它。 有什么建議嗎？

https://codepen.io/Dali213/pen/ExjLMdG?editors=0110

const ul = document.querySelector("ul");

//initialisation
const arr = ["learn how to use GitHub.", "learn how to use GitHub.", "learn how to use GitHub."];

for (let i = 0; i < arr.length; i++) {
  addToDo(arr[i]);
}

function addToDo(text) {
  const li = document.createElement("li");
  const p = document.createElement("p");
  p.textContent = text;
  li.append(p);
  li.addEventListener("click", lineThrough);
  li.addEventListener("mouseover", addTrashCan);
  li.addEventListener("mouseout", removeTrashCan);
  ul.append(li);
}

//add rubish icon+delete function
function del() {
  const li = this.closest("li");
  li.removeEventListener("click", lineThrough);
  li.removeEventListener("mouseover", addTrashCan);
  li.removeEventListener("mouseout", removeTrashCan);
  li.remove();
}

function addTrashCan() {
  const trashCan = document.createElement("i");
  trashCan.classList.add("far", "fa-trash-alt", "trash-can");
  trashCan.addEventListener("click", del);
  this.prepend(trashCan);
}

function removeTrashCan() {
    const trashCan = this.querySelector("i");
    trashCan.removeEventListener("click", del);
    trashCan.remove();
}

第二個問題，起初我的偽元素 ::first-letter 工作正常，現在卻不是。 當我查看使用開發工具應用的樣式時，它似乎仍然適用......為什么？

對我的代碼的任何建議都非常受歡迎。

感謝您的時間。

Answer 1

您可以在開始時預先添加垃圾桶並根據mouseout或mouseover事件顯示/隱藏，而不是每次都創建元素：

.hidden {
  display: none !important;
}

function addTrashCan() {
  this.querySelector('i').classList.remove('hidden')
}

function removeTrashCan() {
  this.querySelector('i').classList.add('hidden')
}

function addToDo(text) {
  const li = document.createElement("li");
  const p = document.createElement("p");
  const trashCan = document.createElement("i");
  trashCan.classList.add("far", "fa-trash-alt", "trash-can", "hidden");
  trashCan.addEventListener("click", del);
  li.prepend(trashCan);
  p.textContent = text;
  li.append(p);
  li.addEventListener("click", lineThrough);
  li.addEventListener("mouseover", addTrashCan);
  li.addEventListener("mouseout", removeTrashCan);
  ul.append(li);
}

 const ul = document.querySelector("ul"); const input = document.querySelector("input"); //initialisation const arr = ["learn how to use GitHub.", "learn how to use GitHub.", "learn how to use GitHub."]; for (let i = 0; i < arr.length; i++) { addToDo(arr[i]); } function addToDo(text) { const li = document.createElement("li"); const p = document.createElement("p"); const trashCan = document.createElement("i"); trashCan.classList.add("far", "fa-trash-alt", "trash-can", 'hidden'); trashCan.addEventListener("click", del); li.prepend(trashCan); p.textContent = text; li.append(p); li.addEventListener("click", lineThrough); li.addEventListener("mouseover", addTrashCan); li.addEventListener("mouseout", removeTrashCan); ul.append(li); } //hide the input function hideInput() { input.classList.toggle("hidden"); } //add task to the list function enter() { if (event.keyCode === 13) addToDo(this.value); } //line-through on click function lineThrough() { this.querySelector("p").classList.toggle("line-through"); } //add rubish icon+delete function function del() { const li = this.closest("li"); li.removeEventListener("click", lineThrough); li.removeEventListener("mouseover", addTrashCan); li.removeEventListener("mouseout", removeTrashCan); li.remove(); } function addTrashCan() { /*const trashCan = document.createElement("i"); trashCan.classList.add("far", "fa-trash-alt", "trash-can"); trashCan.addEventListener("click", del); this.prepend(trashCan);*/ console.log('in'); this.querySelector('i').classList.remove('hidden') } function removeTrashCan() { /*const trashCan = this.querySelector("i"); trashCan.removeEventListener("click", del); trashCan.remove();*/ console.log('out'); this.querySelector('i').classList.add('hidden') } //listeners document.querySelector(".display").onclick = hideInput; input.onkeyup = enter;

 * { padding: 0px; margin: 0px; } body { background: linear-gradient(90deg, #18b7e4, #e8e9be); } .container { background-color: aliceblue; min-width: 270px; max-width: 270px; margin: 80px auto 0px; } .head { padding: 5px 10px; display: flex; justify-content: space-between; background-color: #2072b5; color: #ffffff; } .display, i { cursor: pointer; } input { border: 2px solid #2072b5; width: 246px; padding: 5px 10px; } .hidden { display: none !important; } ul { list-style: none; } p { display: inline; padding: 2px 5px; } p::first-letter { text-transform: capitalize; } li:nth-of-type(odd) { background-color: #f7f5f7; } li:nth-of-type(even) { background-color: #ffffff; } .line-through { text-decoration: line-through; opacity: 0.7; } .trash-can { background-color: red; color: #ffffff; padding: 2px 5px; } li { display: flex; }

 <!DOCTYPE html> <html> <head> <title>to-do list</title> <link rel="stylesheet" href="main.css" /> <script src="https://kit.fontawesome.com/fe178342de.js" crossorigin="anonymous"></script> </head> <body> <div class="container"> <div class="head"> <h1>TO-DO LIST</h1> <h1 class="display">+</h1> </div> <input type="text" placeholder="Add New Todo" /> <ul></ul> </div> <script src="main.js"></script> </body> </html>

編輯：要修復::first-letter偽元素，您可以添加以下 css：

li {
  display: flex;
}