[英]scrolling div using jquery setTimeout & mouseenter & mouseleave
[英]Using Mouseenter / MouseLeave to Change Div in JavaScript
我正在尝试使用数组索引来允许一组div ID在触发mouseenter和mouseleave函数时从一个ID更改为另一个ID。
我知道还有其他方法可以执行此操作-切换,悬停或CSS悬停。 这只是对我的学习,我很新。
注释了下面的代码,基本问题与为什么“ largeID”(或smallID)的数组变量输出正确的值有关,但是尝试使用索引值却没有。 对于每个for语句,我希望在鼠标进入div时将smallID [i]值替换为largeID [i]值,但是我不想为每个代码编写代码,即“ largeID [1]” ,largeID [2]。
感谢您的指导!!
$(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
});
}
在mouseenter函数中未定义largeID [i]的原因是,i的最后一个值会被记住并用于mouseenter事件。
当您使用变量并且它超出“范围”时,将自动创建一个闭包,以允许仍需要该变量的函数使用该变量,并且mouseenter函数都引用同一变量。
当我大于使用radialDivList.length的div数量时,for循环停止。 现在,每次使用i来引用数组中索引的尝试都将超出范围。
此页面上的第一个答案很好地说明了这一点: 循环内的JavaScript闭合–简单的实际示例
我已经修改了您的示例,以使用其自己的“ i”副本创建一个新函数。 因此,当将鼠标悬停在第一个div上时,i将等于0;当将鼠标悬停在第二个div上时,i将等于1,以此类推。
$(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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.