将所选对象从一个位置移到另一位置，然后再次移回原始位置

Question

我正在做一个关键字选择器，用户可以在其中从一个框中选择一个或多个关键字。 然后，将选定的那些关键字从原始框中取出并放入旁边的框中，显示所选的关键字。

我希望将关键字元素存储在数组中，但是我在弄清楚用户如何实际单击元素并将其显示在相反的框中时遇到了麻烦。 我似乎取得任何进展的唯一方法是使用单独元素的onclick（）函数等，但这不是我想要的。

是否可以将这些元素从其包含的div中移动到空框div中？ 对此的任何建议或回应将不胜感激，随附的代码段可更好地解决问题。 感谢大家。

 var kwords = [ "audi", "bmw", "chevrolet", "honda", "mercedes", ] function car1() { document.getElementById("inner").style.color = 'blue'; } 

 #boxleft { border: 5px solid blue; background-color: gray; height: 250px; width: 250px; margin-bottom: 20px; float: left; } #boxright { border: 5px solid blue; background-color: gray; height: 250px; width: 250px; margin-bottom: 20px; float: left; display: inline; } #inner { color: red; } 

 <div id="boxleft"> <div id="inner" onclick="car1();">audi</div> <div id="inner1">bmw</div> <div id="inner2">chevrolet</div> <div id="inner3">honda</div> <div id="inner4">mercedes</div> </div> <div id="boxright"></div> 

Answer 1

您可以将click侦听器一次附加到许多元素。 看看这个codepen 。

这是怎么回事：

1. document.querySelectorAll('.keyword')在文档中查找具有keyword类的所有元素（看看我如何更改HTML部分）
2. 在forEach循环中，line element.addEventListener('click', toggleKeyword) click侦听器添加到找到的每个元素中（相当于手动分配onClick属性）
3. 现在，当您单击关键字时，将执行toggleKeyword函数：
4. var element = event.target; 是您单击的元素
5. boxLeft和boxRight变量是具有boxLeft和boxRight id的这两个div
6. var newParent = element.parentNode.id === 'boxleft' ? boxRight : boxLeft; 这行检查新的父元素应该是哪个，如果您在leftbox单击div ，则应转到rightbox ，反之亦然。
7. 最后，我们从当前父元素中删除元素，然后添加到相反的元素。