题
我遇到的问题是,当被调用的函数多次为不同的元素。我相信我需要本地化的所有变量,使得该功能可以对多个元素使用。的情况下,它的事项我还呼吁在jquery的1.3。
如果我只叫pageSlide一次,一切都很好,但一旦我把它称为多次它变得痛苦。没有错误,只是奇怪的行为。
<强>代码已被更新强>
var slideMenu=function(){
var speed, startWidth, time, menuId, liID, menuLen, menuWidth, globalWidth, openWidth;
return{
speed : 0, startWidth : 0, time : 0, menuId : 0, liID : 0, menuLen : 0, menuWidth : 0, globalWidth : 0, openWidth : 0,
build:function(ulID,passStartWidth,passTime,s,passSlideLen,passHeight){
speed=s;
startWidth=passStartWidth;
time=passTime;
menuId=document.getElementById(ulID);
liID=menuId.getElementsByTagName('li');
menuLen=liID.length;
menuWidth=menuId.offsetWidth;
globalWidth=menuWidth/menuLen;
openWidth=Math.floor((menuWidth-startWidth)/(menuLen-1));
var i=0;
for(i;i<menuLen;i++){
s=liID[i];
s.style.width=globalWidth+'px';
this.timer(s)
}
if(passSlideLen!=null){
menuId.timer=setInterval(function(){
slideMenu.slide(liID[passSlideLen-1])
},time)
}
},
timer:function(s){
s.onmouseover=function(){
clearInterval(menuId.htimer);
clearInterval(menuId.timer);
menuId.timer=setInterval(function(){
slideMenu.slide(s)
},
time)
}
s.onmouseout=function(){
clearInterval(menuId.timer);
clearInterval(menuId.htimer);
menuId.htimer=setInterval(function(){
slideMenu.slide(s,true)
},
time)
}
},
slide:function(s,passChange){
var changeWidth=parseInt(s.style.width);
if((changeWidth<startWidth && !passChange) || (changeWidth>globalWidth && passChange)){
var overallWidth=0;
var i=0;
for(i;i<menuLen;i++){
if(liID[i]!=s){
var slideObj,openWidth; var opening=0; slideObj=liID[i]; openWidth=parseInt(slideObj.style.width);
if(openWidth<globalWidth && passChange){
opening=Math.floor((globalWidth-openWidth)/speed);
opening=(opening>0)?opening:1;
slideObj.style.width=(openWidth+opening)+'px';
}else if(openWidth>openWidth && !passChange){
opening=Math.floor((openWidth-openWidth)/speed);
opening=(opening>0)?opening:1;
slideObj.style.width=(openWidth-opening)+'px'
}
if(passChange){
overallWidth=overallWidth+(openWidth+opening)}else{overallWidth=overallWidth+(openWidth-opening)
}
}
}
s.style.width=(menuWidth-overallWidth)+'px';
}else{
clearInterval(menuId.timer);
clearInterval(menuId.htimer)
}
}
};
}();
上面的代码不会错误,但无法工作。当我使用this关键字,它不会得到任何好转。
我的问题是哪些变量应该是“这一点。”。我已经试过,我认为会工作的各种组合,但我失去了一些东西。
解决方案
我想你误会模块模式的整体概念,当你需要把所有的实例之间共享,那么你可以声明或只是return语句之前初始化关键字“VAR”您的变量一个全局静态变量
假设是,每次更改这些变量所有实例将被更改的影响
var slideMenu=function(){
// Declare or initialize your private static variables here
var speed, startWidth, time;
return {
// Public part of your object
slide:function(s,passChange){
//To access your variable
speed = 20;
...
在,如果你想保持可变安全从全球范围内,你必须把你的变量到你的函数返回的对象。另一方面,这是一个可靠的方法来提供的每个实例的属性独特
var slideMenu=function(){
// Declare or initialize your private static variables here
var speed, startWidth, time;
return {
// Public part of your object
// Declare internal or public properties here
menuId : 0,
liID : 0,
menuLen : 0,
...
slide:function(s,passChange){
//To access your private static variable inside functions
speed = 20;
// To access your public/internal properties
this.menuId = s; // for example ;)
}
要结束强>
有时帮内部/公共属性区分一些人写了一个前导下划线在他们的内部属性(请注意,性能仍然会保持可访问来自外部的)。
希望它能帮助,祝你好运!
其他提示
您,因为您正在使用的模块模式,它允许在你的对象来保存私人静态变量这个行为。的问题是,这些变量的所有实例之间共享。
var sp=0;
var st=0;
var t=0;
var m='';
var sa='';
var l=0;
var w=0;
var gw=0;
var ot=0;
您必须对这些变量在脚本中的返回部分或构造又名进入你的公共实例(但在这种情况下,你将不得不为每个变量一个getter)。
return{
// Place your variables here
sp : 0,
st : 0,
...
build:function(sm,sw,mt,s,sl,h){
// And then use the this keyword to access the variable
this.sp=s;
this.st=sw;
t=mt;
m=document.getElementById(sm);
sa=m.getElementsByTagName('li');
l=sa.length;
w=m.offsetWidth;
gw=w/l;
...
不隶属于 StackOverflow