Question

如果我有这样的HTML：

<a href="#" class="movieImg"><div class="previewBulk"></div></a>
<a href="#" class="movieImg"><div class="previewBulk"></div></a>

和Javascript一样：

var movie = document.getElementsByClassName("movieImg");
var preview = document.getElementsByClassName("preview");

有addEventListener 2电影标记和预览div标记吗？我尝试循环，但当我做的事情：

for(var i = 0, j=movie.length; i<j; i++){
 movie[i].style.left = 100;
 preview[i].style.left = 100;
}

我得到Uncaught TypeError: Cannot read property 'style' of undefined。

将预览更改为previewBulk后，我仍然收到错误，我的代码实际上看起来像这样

(function(){
        var movie = document.getElementsByClassName("movieImg"),
        preview = document.getElementsByClassName("previewBulk");
        //result = [];

        for(var i = 0, j=movie.length; i<j; i++){
            movie[i].addEventListener("mouseover", function(){

                preview[i].style.left = ((movie[i].offsetWidth-preview[i].offsetWidth)/2)+20;
                preview[i].style.top = -(movie[i].offsetHeight+preview[i].offsetHeight);
                preview[i].style.visibility = "visible";
            });

            movie[i].addEventListener("mouseout", function(){
                preview[i].style.visibility = "hidden";
            });
        }
    }());

Answer 1

document.getElementsByClassName不会返回数组。它返回一个遍历XML文件的节点列表。

    <a href="#" class="movie"><div class="previewBulk"></div></a>
    <a href="#" class="movie"><div class="previewBulk"></div></a>

    <script>

    var movie = document.getElementsByClassName("movie");

    for(var i = 0; i<movie.length; i++){
      movie.item(i).style.width = "100px";
    }

    </script>

参见jsfiddle：http://jsfiddle.net/Uy5fk/

Answer 2

// for each iterates over a list and runs a function for each element
var forEach = Array.prototype.forEach,
    // query selector all runs a CSS selector and returns a list of elements
    // matching the selector
    $$ = document.querySelectorAll.bind(document);

// for each element in the list returned by the CSS selector    
forEach.call($$('.movieImg, .preview'), function(v) {
  // add an event listener to the click event
  v.addEventListener('click', function(e) {
    // and run some event handling code.    
  }, false);
});

当然存在浏览器合规性问题。他们需要支持ES5＆amp; DOM2事件。使用填充程序符合浏览器要求。

如果你包括

它应该修复浏览器支持。当然FF4 / Chrome / safari5 / ie9 / Opera10 +已经支持这些

修改

问题实际上是"closures inside loops problem"
中描述的javascript garden

Answer 3

没有带有classname preview的标签

var preview = document.getElementsByClassName("preview");

会导致该错误

此行必须如下

var preview = document.getElementsByClassName("previewBulk");

并且@ raym0nd表示div代码的数量必须等于a代码的数量

修改

您的代码的问题是您在匿名函数中使用了for循环的索引，但是在mouseout和mouseover事件中调用此函数并在完成{{1}之后}循环尝试以下

for

或在jsFiddle
中测试

Answer 4

for(var i = 0, j=movie.length; i<j; i++){
 movie[i].style.left = 100;
 preview[i].style.left = 100;
}

预览与电影的长度相同吗？如果不是这会给你一个错误。

Answer 5

您有class="previewBulk"和document.getElementsByClassName("preview");

您的代码假定类preview中的元素数量与movieImg一样多，但由于您的类名称错误，因此这些元素将为零。

如何为html类添加事件监听器？

5 个答案: