javascript - 事件处理程序在循环中无法正常工作

Question

我正在尝试通过 foo 循环将一些类应用于 html 元素。问题是循环变量无法正常工作。

'use strict'

  window.onload = function(){
    var elements = document.getElementsByTagName("div")

    for(var i = 0; i < elements.length; i++){
      elements[i].addEventListener("click", a(this, i), false)
    }

    function a(e, x){
      if(!e.className){
        e.className = "class".concat(x)
      }
      else {
        e.classList.remove(e.className)
      }
    }
  }

  div{
    background-color: red;
  }

  .class0{
    background-color: blue;
  }

  .class1{
    background-color: purple;
  }

Answer 1

正如@Patrick建议的那样:

  window.onload = function(){
    var elements = document.getElementsByTagName("div")

    for(var i = 0; i < elements.length; i++){
      elements[i].addEventListener("click", a.bind(window, elements[i],i), false)
    }

    function a(e, x){
      if(!e.className){
        e.className = "class".concat(x)
      }
      else {
        e.classList.remove(e.className)
      }
    }
  }

您正在调用函数 a 并将其结果分配为事件处理程序。

使用bind，您可以创建一个函数，该函数将调用a，并将元素和索引作为参数传递。