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

每次添加或添加Todo时，您似乎都会显示所有项目另一种方法是执行以下操作：

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

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

如何将这个jQuery添加到我的Javascript函数中？

1 个答案: