时间戳

首页 > 解决方案 > 如何移动创建的内容成一个不移动整体并不断创造元素?

javascript - 如何移动创建的内容成一个不移动整体并不断创造元素?

问题描述

总 JS 新手在这里，我正在尝试使用 vanilla JS/Html 编写一个待办事项列表，其中“待办事项”中的元素在单击时可以以“完成”结尾。我已经使我的图标可点击，我已经设法将内容从一个 div 移动到另一个，但我有几个问题，我似乎无法找到问题所在：

1：当我（以为我）要求它移动唯一时，为什么我的 JS 脚本将我的整个 'doList' div 移动到我的 'doneList' div 中<li id=todotask>？是父母的问题吗？（第 24 行）编辑：已解决

2：我到底如何设法只移动一个<li>元素，我点击的那个，而不是其他的？现在他们在出现时都会得到相同的 ID，所以我想这将是一个问题，所以...... 编辑：已解决

3：有没有办法可以给每个不同的ID并在我点击后<li>更改移动元素的ID？<li>

4：当我最终<li>在点击后将我的元素放在正确的 div 中时，如何“重新启动”我的函数，以便<li>我输入的下一个元素出现在“todo”中，而不是在我移动的那个之后出现在“done”中？

这是我迄今为止阅读和尝试过的内容：在我的 moveItem 函数中更改父项和子项，<li>在创建时为我的元素提供一个 ID，使用 li.id 和 classList.remove/add 删除和添加一个 ID，请阅读关于如何将 div 相互移动的至少 50 个 SO 答案，但没有找到任何适合我需要的东西，因为我想移动一个 .createElement 创建的<li>onclick 并完成它，而不是 div 本身移动，移动元素已经在我的 html 中或融合了两个 div 的内容...

这是我的 JS 代码，我希望你能通读我在这里尝试实现的目标，这是我的第一篇文章，第一次接触 JS 和代码，另外我是法国人，还没有所有的词汇，请多多包涵...

这是我的代码：

function newItem() {
  console.log("Inside newItem")

  //set variables
  let item = document.getElementById("taskinput").value;
  let ul = document.getElementById('doList');
  let li = document.createElement('li');
  li.id = 'todotask';

// now put text in list item
  li.appendChild(document.createTextNode(item));
  ul.appendChild(li); // put list item in our unordered list
  document.getElementById("taskinput").value = ""; // erase what is currently in todo
  li.onclick = moveItem; // run moveItem when the li is clicked
}

function moveItem(e) {
  var moveTo = this.parentElement.parentElement == doneList ? todotask : doneList;
  moveTo.appendChild(this.parentElement);
  console.log("Item Moved to Done")
}

document.body.onkeyup = function(e) {

  let item = document.getElementById("taskinput").value;
  if (e.keyCode == 13) {
    console.log('enter pressed!');
    newItem();
    console.log(item);
  };
};

document.getElementById('addtask').onclick = function() {
  console.log('Add button pressed!')
  newItem()
}
<body>

  <div class="container">
    <div>
      <h1>To Do List</h1>
    </div>

    <div id="addtaskbar">
      <input type="text" name="taskinput" id="taskinput" placeholder="What do you have to do next?">
      <input type="button" name="addtask" id="addtask" value="Add">
    </div>
  </div>
  <div class="container">
    <div id="todo">
      <ul id='doList'>

      </ul>
    </div>

    <div id="done">
      <ul id='doneList'>

      </ul>

    </div>
  </div>

这是它在我移动元素之前和之后在我的检查器上显示的内容：

前：

前

后：

后

我希望我不会浪费您的时间，并且您会以我的方式帮助新手，非常感谢！

标签： javascriptfunctionappendchild

解决方案

在moveItem，this是ul。所以你应该在移动this，而不是this.parentElement。

此外，doListordoneList将是元素的父元素，而不是祖父母，因此您需要更改三元表达式中的条件。

而后退时的目的地应该是doList，todotask是特定任务的ID。您也不应该像这样创建重复的 ID。无需为动态创建的任务提供 ID。

function newItem() {
  console.log("Inside newItem")

  //set variables
  let item = document.getElementById("taskinput").value;
  let ul = document.getElementById('doList');
  let li = document.createElement('li');

  // now put text in list item
  li.appendChild(document.createTextNode(item));
  ul.appendChild(li); // put list item in our unordered list
  document.getElementById("taskinput").value = ""; // erase what is currently in todo
  li.onclick = moveItem; // run moveItem when the li is clicked
}

function moveItem(e) {
  var moveTo = this.parentElement == doneList ? doList : doneList;
  moveTo.appendChild(this);
  console.log("Item Moved to " + (moveTo == doneList ? "Done" : "ToDo"))
}

document.body.onkeyup = function(e) {

  let item = document.getElementById("taskinput").value;
  if (e.keyCode == 13) {
    console.log('enter pressed!');
    newItem();
    console.log(item);
  };
};

document.getElementById('addtask').onclick = function() {
  console.log('Add button pressed!')
  newItem()
}
<body>

  <div class="container">
    <div>
      <h1>To Do List</h1>
    </div>

    <div id="addtaskbar">
      <input type="text" name="taskinput" id="taskinput" placeholder="What do you have to do next?">
      <input type="button" name="addtask" id="addtask" value="Add">
    </div>
  </div>
  <div class="container">
    To Do
    <div id="todo">
      <ul id='doList'>

      </ul>
    </div>
    Done:
    <div id="done">
      <ul id='doneList'>

      </ul>

    </div>
  </div>

推荐阅读