Advice on how to make a javascript function callable multiple times on the same page
Question
So, I have the following snippets of code:
Script.js-
var menuSlider=function(){
var m,e,g,s,q,i; e=[]; q=8; i=8;
return{
init:function(j,k){
m=document.getElementById(j); e=m.getElementsByTagName('li');
var i,l,w,p; i=0; l=e.length;
for(i;i<l;i++){
var c,v; c=e[i]; v=c.value; if(v==1){s=c; w=c.offsetWidth; p=c.offsetLeft}
c.onclick=function(){menuSlider.mo(this)}; /*c.onmouseout=function(){menuSlider.mo(s)};*/
}
g=document.getElementById(k); g.style.width=(w)+'px'; g.style.left=(p)+'px';
},
mo:function(d){
clearInterval(m.tm);
var el,ew; el=parseInt(d.offsetLeft); ew=parseInt(d.offsetWidth);
m.tm=setInterval(function(){menuSlider.mv(el,ew)},i);
},
mv:function(el,ew){
var l,w; l=parseInt(g.offsetLeft); w=parseInt(g.offsetWidth);
if(l!=el||w!=ew){
if(l!=el){var ld,lr,li; ld=(l>el)?-1:1; lr=Math.abs(el-l); li=(lr<q)?ld*lr:ld*q; g.style.left=(l+li)+'px'}
if(w!=ew){var wd,wr,wi; wd=(w>ew)?-1:1; wr=Math.abs(ew-w); wi=(wr<q)?wd*wr:wd*q; g.style.width=(w+wi)+'px'}
}else{clearInterval(m.tm)}
}};}();
-
style2.css-
...
#slide {position:absolute; top:6px; height:13px; background:#4A7AFF; z-index:10}
I call the javascript from my HTML document in a pretty standard way:
...
script type="text/javascript" language="javascript" src="script.js"></script>
</head>
<body onload="global.menuSlider.init('menu','slide')">
...
Basically, I want to try to call several instances of this slider in my HTML document. I have tried wrapping the function inside of another function:
(var global=function () {var menuSlider=function(){...}};}();}());\
and then calling on the global function instead of the menuSlider function (attempting to follow advice given here , but with no luck (did not work, obviously).
This is how I'm calling it from index.html:
<script type="text/javascript" language="javascript" src="script.js"></script>
</head>
<body onload="menuSlider.init('menu','slide')">
<div class="menu">
<ul id="menu">
<li value="1"><a style="cursor:pointer">1</a></li>
<li value="2"><a style="cursor:pointer">2</a></li>
<li value="3"><a style="cursor:pointer">3</a></li>
<li value="4"><a style="cursor:pointer">4</a></li>
<li value="5"><a style="cursor:pointer">5</a></li>
<li value="6"><a style="cursor:pointer">6</a></li>
</ul>
<div id="slide"></div>
</div>
When I say It's not working, I mean that if I try to call the function twice (EG:
<div class="menu">
<ul id="menu">
<li value="1"><a style="cursor:pointer">1</a></li>
<li value="2"><a style="cursor:pointer">2</a></li>
<li value="3"><a style="cursor:pointer">3</a></li>
<li value="4"><a style="cursor:pointer">4</a></li>
<li value="5"><a style="cursor:pointer">5</a></li>
<li value="6"><a style="cursor:pointer">6</a></li>
</ul>
<div id="slide"></div>
</div><div class="menu">
<ul id="menu">
<li value="1"><a style="cursor:pointer">1</a></li>
<li value="2"><a style="cursor:pointer">2</a></li>
<li value="3"><a style="cursor:pointer">3</a></li>
<li value="4"><a style="cursor:pointer">4</a></li>
<li value="5"><a style="cursor:pointer">5</a></li>
<li value="6"><a style="cursor:pointer">6</a></li>
</ul>
<div id="slide"></div>
</div>
The background of the slider bar and the numerical values appear twice, but the actual functional portion of the slider bar (read: the slider) only works on the first bar (and it does not work well).
I'd imagine that I'm only calling the function once, or, if I'm calling it more than once, maybe I'm calling two instances of the function on top of each other?
2 answers
solution1
2 2012-08-10 20:34:57
Sounds like you want something that acts more like a class, from which you can instantiate more than on instance?
how about this? http://ejohn.org/blog/simple-class-instantiation/
solution2
1 ACCPTED 2012-08-13 17:58:41
In HTML, the id attributes must be unique. Try
<div class="menu">
<ul id="menuA">
<li value="1"><a style="cursor:pointer">1</a></li>
<li value="2"><a style="cursor:pointer">2</a></li>
<li value="3"><a style="cursor:pointer">3</a></li>
<li value="4"><a style="cursor:pointer">4</a></li>
<li value="5"><a style="cursor:pointer">5</a></li>
<li value="6"><a style="cursor:pointer">6</a></li>
</ul>
<div id="slideA"></div>
</div><div class="menu">
<ul id="menuB">
<li value="1"><a style="cursor:pointer">1</a></li>
<li value="2"><a style="cursor:pointer">2</a></li>
<li value="3"><a style="cursor:pointer">3</a></li>
<li value="4"><a style="cursor:pointer">4</a></li>
<li value="5"><a style="cursor:pointer">5</a></li>
<li value="6"><a style="cursor:pointer">6</a></li>
</ul>
<div id="slideB"></div>
</div>
In your javascript:
window.onload = function () {
menuSlider.init('menuA','slideA');
menuSlider.init('menuB','slideB');
};
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.