三行代码  ›  专栏  ›  技术社区  ›  user2816227

如果div嵌套在特定样式下,则使用元素创建div

  •  0
  • user2816227  · 技术社区  · 2 月前

    我不明白为什么我的接替孩子的命令在条件满足之前就下达了。当一个特定的子元素被移动到另一个容器时,我想用另一个适合该容器的元素替换它。这发生在一个检查单击了哪些按钮的函数中。单击复选标记按钮时。它将把整个列表项从名为tasklist的div移动到名为completed的dif。感谢任何帮助。这是我的代码:

    function statusCheck(e) {
    const item = e.target;
    
    if (item.classList.contains('trash-btn')) {
        const task = item.parentElement.parentElement;
        task.classList.add('vanish');
        task.addEventListener('transitionend', function(){
            task.remove();
        });
    }
    
    if (item.classList.contains('check-btn')) {
        let task = item.parentElement.parentElement;
        task.classList.add('complete');
        item.remove();
        completed.appendChild(task);
    
        task = document.querySelector('.complete');
        const taskItem = document.querySelector('.card-date');
        if (task.classList.contains('complete')) {
            console.log(taskItem);
            const swapTask = taskItem.children[0];
            console.log(swapTask);
            const swapTaskItem = document.createElement('span');
            swapTaskItem.classList.add('text-complete');
            swapTaskItem.innerText = 'Completed: ';
            taskItem.replaceChild(swapTaskItem, swapTask);
        }
    }
    

    此图片显示在移动到我完成的div之前已完成。有时它们在Done列中堆叠“Completed:Completed:'”

    enter image description here

    1 回复  |  直到 2 月前
        1
  •  0
  •   isherwood boatSoap    2 月前

    我建议换个方向。使用DOM跟踪应用程序状态不是一个好策略。我会为您的任务保留一个状态对象,并引用它。数据驱动DOM,而不是相反。一般来说,这就是React、Angular和Vue等前端应用程序库为您所做的。您可以使用类似这样的功能:

    let items = [{
      id: 1,
      assignedTo: '',
      description: '',
      dueDate: '',
      completed: false
    }, {
      id: 2,
      assignedTo: '',
      description: '',
      dueDate: '',
      completed: false
    }, {
      id: 3,
      assignedTo: '',
      description: '',
      dueDate: '',
      completed: false
    }];
    

    然后,您不需要移动元素和更新类,而是根据需要更新每个任务对象中的属性,并通过重新映射它们来刷新视图:

    items.map(item => {
      // put items into the page as appropriate
    });