將所選對象從一個位置移到另一位置，然后再次移回原始位置

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. 最后，我們從當前父元素中刪除元素，然后添加到相反的元素。