Question

我正在尝试学习如何在模块中拆分代码以使其更易于理解。此代码应该将点击的水果添加到水果篮。问题：它只添加最后一个。

如果我将eventListener放在for循环中，我可以使这个工作，但据我所知，这是一个禁止的方法，因为每次点击都会调用循环是多余的。

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关键字 - 无法使其正常运行。

我认为关于循环的一个基本概念我还没有完全理解，而且我也很难确定何时使用 type 循环。我在这里使用了错误的类型吗？

任何帮助非常感谢！： - ）

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/

试图将我的代码拆分成多个模块，循环不起作用

1 个答案: