Why can't I toggle the visibility of every element (within a group) in a for statement, only the last element in the group gets toggled?
The script fires Toggle
fine on each Control
's (Controls[i]
) Click
. If the Control
's first OL
element is not Visible
it should be set Visible
and 开发者_如何学Call other elements in Controls
that are not the current Control
(Controls[i]
) should be set Hidden
. If the Control
's first OL
element is Visible
it should be set Hidden
.
.js
function Toggle(Control){
var Controls=document.getElementsByTagName("ol",document.getElementById("Quote_App"));
var Control=Control.getElementsByTagName("ol")[0];
if(Control.style.visibility!="visible"){
for(var i=0;i<Controls.length;i++){
/* (function(){ */
if(Controls[i]!=Control){
Control.style.visibility="hidden";
}else{
Control.style.visibility="visible";
};
/* })(); */
};
}else{
Control.style.visibility="hidden";
};
};
function Event(Mode,Function,Event,Element,Capture_or_Bubble){
if(Mode.toLowerCase()!="remove"){
if(Element.addEventListener){
if(!Capture_or_Bubble){
Capture_or_Bubble=false;
}else{
if(Capture_or_Bubble.toLowerCase()!="true"){
Capture_or_Bubble=false;
}else{
Capture_or_Bubble=true;
};
};
Element.addEventListener(Event,Function,Capture_or_Bubble);
}else{
Element.attachEvent("on"+Event,Function);
};
};
};
function Controls(){
var Controls=document.getElementById("Quote_App").getElementsByTagName("dd");
for(var i=0;i<Controls.length;i++){
(function(){
var Control=Controls[i];
Event("add",function(){
Toggle(Control);
},"click",Control);
})();
};
};
Event("add",Controls,"load",window);
I am sure it's something with the For
statement, in the source you can see I've commented out a closure that I tried, but that too didn't work. I'm still starting out so not very competent with closures.
Your help is appreciated, thanks in advance.
Because you're only ever setting the visibility of Control, which you are initialising as Controls[0] and never changing?
I needed to change line 14 from Control.style.visibility="hidden";
to Controls[i].style.visibility="hidden";
and it all works wonderfully!
Kudos to Colin Fine!
精彩评论