使用的MouseEnter /鼠标离开更改事业部在JavaScript中 [英] Using Mouseenter / MouseLeave to Change Div in JavaScript
问题描述
我试图用一个数组索引，让一组DIV ID的时候的mouseenter和鼠标离开功能被触发改变从一个ID到另一个。
我知道有其他方法可以做到这一点 - 拨动，悬停，或CSS悬停。这是刚刚学习对我来说，我非常新的。
下code被注释，其基本问题是关系到为什么largeID（或smallID）数组变量输出正确的价值观，而是试图使用索引值不。对于每个for语句，我想smallID [I]值与largeID当鼠标进入DIV [I]值替换，但我不想写code为每一个，即largeID [1]，largeID [2]
感谢您的指点！
$（文件）。就绪（函数（）{ 变种smallID = [];
变种largeID = []; VAR divList = document.getElementsByTagName（'DIV'）[1]; //获取文档中的第二个（radialMenu）格
VAR radialDivList = divList.getElementsByTagName（'DIV'）; //获取第二（radialMenu）DIV下所有div 对于（VAR I = 0; I＆LT; radialDivList.length;我++）{
如果继续（radialDivList [I]！）; //跳过空，不确定的，不存在的元素
如果继续（radialDivList.hasOwnProperty（我）！）; //跳过继承属性
smallID [I] = radialDivList [I] .ID; //指定四的div到smallID数组列表;
largeID [I] = smallID [I] +'完整'; //添加完全每个smallID元素做出largeID元素 警报（smallID [I]）; //警报smallID / largeID和smallID [I] / largeID [I]
警报（largeID [I]）; //给予合理和预期产出 $（'＃'+ smallID [I]）。的mouseenter（函数（）{//为所有四个径向菜单div的工作时，鼠标进入
//但largeID [i]为未定义
警报（largeID [I]）; //未定义
警报（largeID）; //给全阵列的预期产出
}）。鼠标离开（函数（）{//鼠标离开功能无法正常工作 }）; }
的原因，您的largeID [i]于您的mouseenter函数是未定义的是，因为我的最后一个值被记住并在你的mouseenter事件使用。
当你使用一个变量，它会超出范围封闭自动创建允许的变量仍然存在仍然需要它的功能，和你的mouseenter函数都引用同一个变量。
您的循环停止，当我是比你使用radialDivList.length div的量多。用我的阵列中引用索引千方百计现在将出界。
此页面上的第一个答案解释说得好：
<一href=\"http://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example\">JavaScript闭包内环路 - 简单实用的例子
我修改你的例子来创建它自己的i的副本的新功能。因此，将鼠标悬停在第一个div当我将等于0，将鼠标悬停在第二个div时，将等于1，等等。
$（文件）。就绪（函数（）{\r
\r
变种smallID = [];\r
变种largeID = [];\r
\r
VAR divList = document.getElementsByTagName（'DIV'）[1]; //获取文档中的第二个（radialMenu）格\r
VAR radialDivList = divList.getElementsByTagName（'DIV'）; //获取第二（radialMenu）DIV下所有div\r
变种funcs中= [];\r
\r
对于（VAR I = 0; I＆LT; radialDivList.length;我++）{\r
如果继续（radialDivList [I]！）; //跳过空，不确定的，不存在的元素\r
如果继续（radialDivList.hasOwnProperty（我）！）; //跳过继承属性\r
smallID [I] = radialDivList [I] .ID; //指定四的div到smallID数组列表;\r
largeID [I] = smallID [I] +'完整'; //添加完全每个smallID元素做出largeID元素\r
\r
警报（smallID [I]）; //警报smallID / largeID和smallID [I] / largeID [I]\r
警报（largeID [I]）; //给予合理和预期产出\r
funcs中由[i] =函数（ⅰ）{\r
$（'＃'+ smallID [I]）。的mouseenter（函数（）{//为所有四个径向菜单div的工作时，鼠标进入\r
//但largeID [i]为未定义\r
警报（largeID [I]）; //未定义\r
警报（largeID）; //给全阵列的预期产出\r
}）。鼠标离开（函数（）{//鼠标离开功能无法正常工作\r
\r
}）;\r
} .bind（这一点，我）;\r
}\r
\r
对于（VAR I = 0; I＆LT; funcs.length;我++）{\r
funcs中由[i]（）;\r
}\r
}）; \r
＆LT; HTML和GT;\r
\r
＆LT; HEAD＆GT;\r
＆所述; SCRIPT SRC =https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js＆GT;＆下; /脚本＆GT;\r
＆LT;标题物实施例＆LT; /标题＆GT;\r
＆LT; /头＆GT;\r
\r
＆LT;身体GT;\r
＆LT; DIV＆GT;\r
＆LT; DIV＆GT;\r
＆LT; DIV ID =一的风格=背景：绿色;高度：高40＆GT;\r
＆LT; / DIV＆GT;\r
＆LT; DIV ID =二的风格=背景：红色;高度：高40＆GT;\r
＆LT; / DIV＆GT;\r
＆LT; DIV ID =三的风格=背景：蓝色;高度：高40＆GT;\r
＆LT; / DIV＆GT;\r
＆LT; / DIV＆GT;\r
＆LT; / DIV＆GT;\r
＆LT; /身体GT;\r
\r
＆LT; / HTML＆GT; \r
I am trying to use an array index to allow a set of div IDs to change from one ID to another when the mouseenter and mouseleave functions are triggered.
I know there are other ways to do this - toggle, hover, or CSS hover. This is just learning for me, and I am very new.
The code below is commented, and the basic problem is related to why an array variable of "largeID" (or smallID) outputs the proper values, but trying to use an index value doesn't. For each for statement, I want the smallID[i] value to be replaced with the largeID[i] value when the mouse enters the div, but I don't want to write the code for each one, i.e. "largeID[1], largeID[2].
Thanks for any pointers!!
$(document).ready(function() {
var smallID = [];
var largeID = [];
var divList = document.getElementsByTagName('div')[1]; //get the second (radialMenu) div in the document
var radialDivList = divList.getElementsByTagName('div'); // get all divs under the second (radialMenu) div
for(var i = 0; i < radialDivList.length; i++) {
if (!radialDivList[i]) continue; //skip null, undefined and non-existent elements
if (!radialDivList.hasOwnProperty(i)) continue; //skip inherited properties
smallID[i] = radialDivList[i].id; //assign the list of four divs to the smallID array;
largeID[i] = smallID[i] + 'Full'; // add "Full" to each smallID element to make a largeID element
alert(smallID[i]); // alerts for smallID / largeID and smallID[i] / largeID[i]
alert(largeID[i]); // give rational and expected output
$('#' + smallID[i]).mouseenter(function () { //works for all four radial menu divs when mouse enters
//BUT largeID[i] is undefined
alert(largeID[i]); // undefined
alert(largeID); // gives expected output of full array
}).mouseleave(function () { //mouseleave function not working
});
}
The reason your largeID[i] is undefined in your mouseenter function is because the last value of i is remembered and used on your mouseenter events.
When you use a variable and it goes "out of scope" a closure is automatically created to allow the variable to still exist for the function that still needs it, and your mouseenter functions all reference the same variable.
Your for loop stops when i is more than the amount of divs you have using radialDivList.length. Every attempt to use i to reference an index in your array will now be out of bounds.
The first answer on this page explains it well: JavaScript closure inside loops – simple practical example
I've modified your example to create a new function with it's own copy of "i". So when hovering over the first div i will equal 0, when hovering over the second div it will equal 1, etc.
$(document).ready(function() {
var smallID = [];
var largeID = [];
var divList = document.getElementsByTagName('div')[1]; //get the second (radialMenu) div in the document
var radialDivList = divList.getElementsByTagName('div'); // get all divs under the second (radialMenu) div
var funcs = [];
for (var i = 0; i < radialDivList.length; i++) {
if (!radialDivList[i]) continue; //skip null, undefined and non-existent elements
if (!radialDivList.hasOwnProperty(i)) continue; //skip inherited properties
smallID[i] = radialDivList[i].id; //assign the list of four divs to the smallID array;
largeID[i] = smallID[i] + 'Full'; // add "Full" to each smallID element to make a largeID element
alert(smallID[i]); // alerts for smallID / largeID and smallID[i] / largeID[i]
alert(largeID[i]); // give rational and expected output
funcs[i] = function(i) {
$('#' + smallID[i]).mouseenter(function() { //works for all four radial menu divs when mouse enters
//BUT largeID[i] is undefined
alert(largeID[i]); // undefined
alert(largeID); // gives expected output of full array
}).mouseleave(function() { //mouseleave function not working
});
}.bind(this, i);
}
for (var i = 0; i < funcs.length; i++) {
funcs[i]();
}
});
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<title>Example</title>
</head>
<body>
<div>
<div>
<div id="one" style="background:green;height:40px">
</div>
<div id="two" style="background:red;height:40px">
</div>
<div id="three" style="background:blue;height:40px">
</div>
</div>
</div>
</body>
</html>
这篇关于使用的MouseEnter /鼠标离开更改事业部在JavaScript中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
