有关滑动门板块切换显示 js 动态滑动 的细节

蛋疼·的一个细节

在js函数中：正确的形式

onload = function () {
    var door = document.querySelectorAll(".book_sort .book_type");
    var taget = document.querySelectorAll("#box1 .book_class dl");
    for (var i = 0; i < door.length; i++) {
        door[i].index = i;
        door[i].onmouseover = function () {
            this.className = "book_type_out";
            for (var j = 0; j < taget.length; j++) {
                if (j == this.index)
                    taget[j].className = "book_show";
                else
                    taget[j].className = "book_none";
            }

        }
        door[i].onmouseout = function () {
            this.className = "book_type";
        }
    }
}

成功图如下

 

有次偷懒，去掉

door[i].index = i;

 

将j==this.index改成j==i会出现鼠标发生事件时，下边全白，如下图

现在考虑为什么会出现这种情况：

在j带的循环中alert（i）发现一直弹出4，也就是说虽然onmouseover函数写在循环里面但是其实他是在循环结束后构造的，此时i的值为4

而j最大为3所以下列所有元素的类都被赋予book_none类，导致空白现象产生！