Question

我有一个元素数组，我想要应用某个onclick事件。这样做的正确方法是什么（如果可能的话）？

我想要应用于每个元素的函数是：

        function fade(element){
            var o = 1.0;
            var x = setInterval(function(){
                element.style.opacity = o;
                o -= 0.01;
                if(o <= 0) {
                    element.style.display = "none";
                    clearInterval(x);
                }
            }, 10);
        }

这就是我要做的事情：

    <script type="text/javascript">
        var el = document.getElementsByClassName("circle");
        console.log(el[0]);
        for(var i = 0; i < el.length; i++){
            el[i].onclick = function(){ fade(el[i]); }
        }
    </script>

也就是说，我希望将函数fade()应用为类onclick的每个元素的circle事件，这样每当点击一个圆时，它就会淡出。

但是，上面的代码根本不起作用。 JavaScript控制台给出了以下错误：

未捕获的TypeError：无法读取未定义的属性“样式”

我不确定我做错了什么，我只是在学习Javascript。我搜索了这个特定的错误，但没有发现任何非常有用的信息。

- 编辑 -

我的实际代码不长，所以这里是：

function fade(element) {
  var o = 1.0;
  var x = setInterval(function() {
    element.style.opacity = o;
    o -= 0.01;
    if (o <= 0) {
      element.style.display = "none";
      clearInterval(x);
    }
  }, 10);
}

.circle {
  height: 200px;
  width: 200px;
  border-radius: 50%;
  content: '';
  float: left;
}
.red {
  background-color: red;
}
.green {
  background-color: green;
}
.blue {
  background-color: blue;
}

<div id="red" class="circle red"></div>
<div id="blue" class="circle blue"></div>
<div id="green" class="circle green"></div>
<script type="text/javascript">
  var el = document.getElementsByClassName("circle");
  console.log(el[0]);
  for (var i = 0; i < el.length; i++) {
    el[i].onclick = function() {
      fade(el[i]);
    }
  }
</script>

Answer 1

传递元素而不是数组元素
获取要在setInterval
在load事件处理程序

function fade(el) {
  var o = 1.0,
    element = el, // copy the element passed
    x = setInterval(function() {
      element.style.opacity = o;
      o -= 0.01;
      if (o <= 0) {
        element.style.display = "none";
        clearInterval(x);
      }
    }, 10);
}
window.onload = function() {
  var el = document.querySelectorAll(".circle"); // more compatible
  for (var i = 0; i < el.length; i++) {
    el[i].onclick = function() {
      fade(this); // "this" is the element clicked
    }
  }

}

.circle {
  height: 200px;
  width: 200px;
  border-radius: 50%;
  content: '';
  float: left;
}
.red {
  background-color: red;
}
.green {
  background-color: green;
}
.blue {
  background-color: blue;
}

<div id="red" class="circle red"></div>
<div id="blue" class="circle blue"></div>
<div id="green" class="circle green"></div>

如何为集合设置onclick事件？

1 个答案: