如何通过JS将选中的项目从左侧列表移动到右侧列表以及相反的方向

Question

[在此处输入图像描述][1]

嗨，我想创建 2 个列表，如所附图像，可以通过 JavaScript 将项目从左侧列表移动到右侧列表，或者相反。我用于移动所有项目的代码是正确的，但对于已检查的项目，它不起作用，并且我找不到解决问题的方法。请帮助我，谢谢。 [1]：

我的 HTML 代码是：

<div class="container">
   <div class="side left-side"></div>
   <div class="mid-side">
     <button class="all-to-right">>></button>
     <button class="checked-to-right">></button>
     <button class="checked-to-left"><</button>
     <button class="all-to-left"><<</button>
   </div>
   <div class="side right-side"></div>
 </div> 

我的JS代码是：

const leftSide = document.querySelector(".left-side");
const rightSide = document.querySelector(".right-side");

// Initial Values
let leftList = [
  { id: "item1", checked: false, title: "PHP" },
  { id: "item2", checked: false, title: "Python" },
  { id: "item3", checked: false, title: "Ruby" },
  { id: "item4", checked: false, title: "C++" },
];
let rightList = [
  { id: "item5", checked: false, title: "HTML" },
  { id: "item6", checked: false, title: "CSS" },
  { id: "item7", checked: false, title: "JavaScript" },
  { id: "item8", checked: false, title: "Java" },
];

// Render Dom
function renderDom(leftListToRender, rightListToRender) {
  // Clear previous content
  leftSide.innerHTML = "";
  rightSide.innerHTML = "";

  // Render items in left list
  leftListToRender.forEach((item) => {
    leftSide.innerHTML += `<div class="box">
        <input type="checkbox" class="input-box" id="${item.id}" />
        <label for="${item.id}">${item.title}</label>
        </div>`;
  });

  // Render items in right list
  rightListToRender.forEach((item) => {
    rightSide.innerHTML += `<div class="box">
          <input type="checkbox" class="input-box" id="${item.id}" />
          <label for="${item.id}">${item.title}</label>
          </div>`;
  });

  // Register event listeners
  registerEvents();
}

// Clear Dom
function clearDom() {
  document.querySelectorAll(".side").forEach((el) => {
    el.innerHTML = "";
  });
}

// Move all items from left to right
// ....
};

// Move all items from right to left
// ....

// Move checked items from right to left
document.querySelector(".checked-to-left").onclick = function () {
  const checkedItems = rightList.filter((item) => item.checked);
  leftList = leftList.concat(checkedItems);
  rightList = rightList.filter((item) => !item.checked);
  renderDom(leftList, rightList);
  checkButtonCondition();
};

// Move checked items from left to right
document.querySelector(".checked-to-right").onclick = function () {
  const checkedItems = leftList.filter((item) => item.checked);
  rightList = rightList.concat(checkedItems);
  leftList = leftList.filter((item) => !item.checked);
  renderDom(leftList, rightList);
  checkButtonCondition();

};

// Check button conditions
function checkButtonCondition() {
  const allToLeftBtn = document.querySelector(".all-to-left");
  const checkedToRightBtn = document.querySelector(".checked-to-right");
  const checkedToLeftBtn = document.querySelector(".checked-to-left");
  const allToRightBtn = document.querySelector(".all-to-right");

  if (leftList.length === 0) {
    allToRightBtn.classList.add("disabled");
    checkedToRightBtn.classList.add("disabled");
  } else {
    allToRightBtn.classList.remove("disabled");
    checkedToRightBtn.classList.remove("disabled");
  }

  if (rightList.length === 0) {
    allToLeftBtn.classList.add("disabled");
    checkedToLeftBtn.classList.add("disabled");
  } else {
    allToLeftBtn.classList.remove("disabled");
    checkedToLeftBtn.classList.remove("disabled");
  }
}

// Register event listeners
function registerEvents() {
  document.querySelectorAll(".input-box").forEach((checkbox) => {
    checkbox.addEventListener("change", function () {
      checkButtonCondition();
    });
  });
}

// Initial rendering
renderDom(leftList, rightList);
checkButtonCondition();

Answer 1

您可以使用

append

将框直接从一个父 div 移动到另一个父 div。您不必每次都使用

innerHTML

重写整个 html。如果你不在 javascript 中将 HTML 写为字符串，它也会更干净一些。

const leftlist = document.querySelector("#leftlist")
const rightlist = document.querySelector("#rightlist")
const btnright = document.querySelector("#moveright")
const btnleft = document.querySelector("#moveleft")

btnright.addEventListener("click", () => moveCheckedItems(leftlist, rightlist))
btnleft.addEventListener("click",  () => moveCheckedItems(rightlist, leftlist))


function moveCheckedItems(targetList, destinationList){
    const currentItems = targetList.querySelectorAll(".box")
    for(let box of currentItems) {
      if(box.querySelector("input").checked) {
         destinationList.append(box)
      }
    }
}

input, body, button {
  font-size:1em;
  padding:2px;
}
#wrapper {
    display:flex;
    margin:5px;
}

#leftlist, #rightlist {
  border:2px solid grey;
  padding:5px;
}

<div id="wrapper">
    <div id="leftlist">
      <div class="box">
          <input type="checkbox" class="input-box" id="box1" />
          <label for="box1">PHP</label>
      </div>
      <div class="box">
          <input type="checkbox" class="input-box" id="box1" />
          <label for="box1">JS</label>
      </div>
    </div>
    <div id="rightlist">
      <div class="box">
          <input type="checkbox" class="input-box" id="box1" />
          <label for="box1">Python</label>
      </div>
      <div class="box">
          <input type="checkbox" class="input-box" id="box1" />
          <label for="box1">Ruby</label>
      </div>
    </div>
</div>

<div>
<button id="moveright">
  Move checked items from left to right
</button>
</div>
<div>
<button id="moveleft">
  Move checked items from right to left
</button>
</div>