javascript - 如何将此 jQuery 添加到我的 Javascript 函数中？

Question

目前正在学习 jQuery，每次在我的待办事项列表中添加或删除时都想使用 FadeOut 和 FadeIn。我知道我可以为此使用 CSS，但我现在正在学习 jQuery。

function showList(){
  container.innerHTML = "";
  get().forEach((value, index) => {
    var li = document.createElement("div");
    li.id = index;
    li.className = "list";
    li.innerHTML = `
      <span id="${index}" onclick="checked(${index})">${value}</span>
      <i onclick="deleteTodo(${index})" class="iconclick fa fa-trash"></i>
      <i onclick="editTodo(${index})" class="iconclick fa fa-edit"></i>
    `;
    li.classList.add("listClass");
    container.appendChild(li);
  });
}



function addButton(){
  //check and see if the input is blank
  const todos = get();

  if(input.value === ""){
    input.placeholder = "Please enter something";
  } else{
    todos.push(input.value);
    set(todos);
    showList();
    input.value = "";
  }
}

function deleteTodo(index){
  const todos = get();
  todos.forEach((value, index) => {
    console.log("index", index)
    console.log("value", value)
    $(`#${index}`).click(function(event) {
      console.log(event);
      $(this).fadeOut(3000);
    });
  });
  todos.splice(index, 1);
  set(todos);
  showList();
}

Answer 1

似乎每次添加或删除待办事项时都会显示所有元素，但 另一种方法是执行以下操作:

1. 添加待办事项时，使用 style="display:none" 添加一个 li 元素到当前列表，然后调用 fadeIn<
2. 删除待办事项时，使用 $('body').on() 事件处理程序。例如 $("body").on("click", ".delete-todo", function(){...}) 这样您就不需要为删除指定点击处理程序每次添加待办事项。
3. 删除待办事项时，首先识别哪个元素被点击，然后找到最近的 li 元素(因为 li 元素在添加时设置了 display:none 样式)然后为该元素调用 fadeOut()。当淡出动画完成时，删除该元素。

这是一个示例 fiddle https://jsfiddle.net/58tse0j4/ .我希望它可以帮助你。通常我们为这些东西做数据绑定(bind)，但这个例子仅限于 jQuery。