嘗試將我的代碼拆分為多個模塊，循環不起作用

Question

我正在嘗試學習如何在模塊中拆分代碼，以使其更易於理解。 該代碼應將單擊的水果添加到水果籃中。 問題：它僅添加最后一個。

如果將eventListener放在for循環中，則可以使此工作正常進行，但據我所知，這是不可以的方法，因為每次單擊都需要調用循環。

https://jsfiddle.net/8s4qgoLw/1/

var fruitBasket = document.querySelector('.fruit-basket');
var fruitList = document.querySelectorAll('.fruit-list li');

 for (var i = 0; i < fruitList.length; i++) {

 var fruit = fruitList[i];

}

function myFunction() {

  fruitBasket.appendChild(fruit); // or 'this'?

}

fruit.onclick = myFunction;

那么，如何保持JS模塊化，並使onclick目標成為每個單擊的水果？ 我嘗試以不同方式使用this關鍵字-無法使其正常工作。

我認為關於循環還有一個基本概念，我還不太了解，而且我也很難確定何時使用哪種類型的循環。 我在這里使用錯誤的類型嗎？

任何幫助，不勝感激！ :-)

Answer 1

將單擊的水果添加到水果籃

使用以下優化方法：

 (function() { var fruitBasket = document.querySelector('#fruit-basket'), fruitList = document.querySelectorAll('.fruit-list')[0]; fruitList.addEventListener('click', myFunction); // You only created one event listener. The target of the event is represented by e.target, and the target element the event listener is attached to is represented by e.currentTarget. function myFunction(e){ if (e.target !== e.currentTarget) { fruitBasket.appendChild(e.target); } e.stopPropagation(); } })(); 

 #fruit-basket { width: 200px; height: 200px; border: 1px solid black; } 

 <ul class="fruit-list"> <li class="fruit-banana">Banana</li> <li class="fruit-apple">Apple</li> <li class="fruit-grape">Grape</li> <li class="fruit-pear">Pear</li> </ul> <ul id="fruit-basket"></ul> 

https://jsfiddle.net/jqbak0ex/