javascript - 如何动态地将不同的计数器分配给多个元素

Question

我有 16 个三 Angular 形，单击按钮 1 时它们会单独旋转 90 度。因为我有几个执行不同任务的按钮，所以我将所有事件监听器推送到一个数组中，以便可以删除和添加它们。

现在旋转三 Angular 形的函数可以工作了。但每个三 Angular 形都在前一个三 Angular 形的计数器上不断增加，第一次点击时总是旋转太多，然后旋转 90 度。

我想我需要为每个三 Angular 形一个单独的计数器，但随着代码的设置，我有点迷失，我不知道什么是最好的方法。

这里只摆弄相关代码 http://jsfiddle.net/antonimoferraz/xcd5wz2e/16

    document.getElementById('reflective').addEventListener('click',reflective);
document.getElementById('thinking').addEventListener('click',thinking);

let elementos = document.querySelectorAll('div.elements');
    let enhancedElements = [];
    let enhancedElementsclick = [];
    let degree = 90;
    let initial = 0;

// give to each element a separate event handler so it's easy to add and remove when I press different buttons

elementos.forEach(element => {
  enhancedElements.push({
    element,
    mouseenterHandler(){mouseenterHandler(element)},
  })

})

elementos.forEach(element => {

  enhancedElementsclick.push({
    element,
    clickHandler(){clickHandler(element)},
  })

})


//button n1
//removes event listeners from thinking() and adds its own events
function reflective(){

      enhancedElements.forEach(ee => {
        ee.element.removeEventListener('mouseenter', ee.mouseenterHandler)
      })
      enhancedElementsclick.forEach(ee => {
        ee.element.addEventListener('click', ee.clickHandler)
        console.log(ee.counterfunction);

      })
}
//button n2
//removes event listeners from reflective() and adds its own events
function thinking(){

      enhancedElementsclick.forEach(ee => {
        ee.element.removeEventListener('click', ee.clickHandler)
      })
      enhancedElements.forEach(ee => {
        ee.element.addEventListener('mouseenter', ee.mouseenterHandler)

})

}

//what happens on click
function clickHandler(elementt) {

       initial += degree;
       elementt.style.webkitTransform = 'rotate('+initial+'deg)';
       elementt.style.mozTransform    = 'rotate('+initial+'deg)';
       elementt.style.msTransform     = 'rotate('+initial+'deg)';
       elementt.style.oTransform      = 'rotate('+initial+'deg)';
       elementt.style.transform       = 'rotate('+initial+'deg)';
}

function mouseenterHandler(elementt){
// does something else
}

欣赏!

Answer 1

只需将初始值放入元素本身:

elementos.forEach(element => {
  element.initial = 0; // this line
  enhancedElementsclick.push({
    element,
    clickHandler(){clickHandler(element)},
  })
})

然后在处理程序中，您可以使用 elementt.initial:

function clickHandler(elementt) {
   elementt.initial += degree;
   elementt.style.webkitTransform = 'rotate('+elementt.initial+'deg)';
   elementt.style.mozTransform    = 'rotate('+elementt.initial+'deg)';
   elementt.style.msTransform     = 'rotate('+elementt.initial+'deg)';
   elementt.style.oTransform      = 'rotate('+elementt.initial+'deg)';
   elementt.style.transform       = 'rotate('+elementt.initial+'deg)';
}

享受吧:)

旁注:您不需要每次使用另一个数组时都循环，而是将它们合并到一个位置:

elementos.forEach(element => {

  enhancedElements.push({/*your_data*/})

  enhancedElementsclick.push({/*your_data*/})

})