Toggle-Anzeige von array.push und pop

Question

Ich versuche, ein Analog für Klassenliste toggle ohne JQuery, die niedriger als IE 10 mit mehreren Elementen zu zeigen (.show ist display: block) funktioniert, aber mein Code doesn ‚t Arbeit:

(Wenn boxbutton geklickt wird, Feld und Hintergrund angezeigt, und Sie können das Feld in der Nähe entweder boxclose oder Hintergrund klicken)

<script> 
var classList = document.getElementsByClassName('openthis').className.split(" "); 

function openbox() { 
classList.push(" show"); 
}; 

function closebox() { 
classList.pop (); 
}; 
</script> 


<span onclick="openbox();" id="boxbutton">open the box</span> 

<div class="openthis" id="box"> 
<div onclick="closebox();" class="boxclose">X</div> 
</div> 

<div onclick="closebox();" class="openthis" id="backdrop"></div> 

Bitte helfen Sie!

Answer 1

Der richtige Weg in Ihrem Code ist die Verwendung von claseList anstelle von className, da Sie damit Klassen aus einem DOM-Knoten hinzufügen oder entfernen können.

Ich habe auch die var classList entfernen, weil es nicht benötigt wird, und ich habe das versteckte div mit der Klasse hidden initialisiert (werfen Sie einen Blick auf den CSS-Code).

Der Ansatz in openbox und closebox ist die Noten mit Klasse openthis und hinzufügen oder entfernen die hidden Klasse hängt von dem Fall zu erhalten.

function openbox() { 
 
    var elements = document.getElementsByClassName('openthis'); 
 
    Array.prototype.forEach.call(elements, function(el) { 
 
    el.classList.remove("hidden"); 
 
    }); 
 
}; 
 

 
function closebox() { 
 
    var elements = document.getElementsByClassName('openthis'); 
 
    Array.prototype.forEach.call(elements, function(el) { 
 
    el.classList.add("hidden"); 
 
    }); 
 
};

.hidden { 
 
    display: none; 
 
}

<span onclick="openbox();" id="boxbutton">open the box</span> 
 

 
<div class="openthis hidden" id="box"> 
 
    <div onclick="closebox();" class="boxclose">X</div> 
 
</div> 
 

 
<div onclick="closebox();" class="openthis hidden" id="backdrop"> 
 
    Backdrop 
 
</div>

Edit 1:

Diese zweite Version funktioniert für Browser, die nicht classList Methode nicht unterstützt. Ist ein Wurf teurer, aber es funktioniert!

function openbox() { 
 
    var elements = document.getElementsByClassName('openthis'); 
 
    Array.prototype.forEach.call(elements, function(el) { 
 
    removeClass(el, "hidden"); 
 
    }); 
 
}; 
 

 
function closebox() { 
 
    var elements = document.getElementsByClassName('openthis'); 
 
    Array.prototype.forEach.call(elements, function(el) { 
 
    addClass(el, "hidden"); 
 
    }); 
 
}; 
 

 
function addClass(element, classToAdd) { 
 
    var className = element.className; 
 
    element.className = className + " " + classToAdd; 
 
} 
 

 
function removeClass(element, classToRemove) { 
 
    var className = element.className; 
 
    element.className = className.replace(new RegExp("(?:^|\\s+)" + classToRemove + "(?:\\s+|$)", "g"), ""); 
 
}

.hidden { 
 
    display: none; 
 
}

<span onclick="openbox();" id="boxbutton">open the box</span> 
 

 
<div class="openthis hidden" id="box"> 
 
    <div onclick="closebox();" class="boxclose">X</div> 
 
</div> 
 

 
<div onclick="closebox();" class="openthis hidden" id="backdrop"> 
 
    Backdrop 
 
</div>

ich hoffe, das hilft: D