有关滑动门板块切换显示 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类，导致空白现象产生！