javascript - Show different divs from different buttons with same class -
i have (currently) 3 buttons
<p><button class="trigger-overlay" type="button">open overlay 1</button></p> <p><button class="trigger-overlay" type="button">open overlay 2</button></p> <p><button class="trigger-overlay" type="button">open overlay 3</button></p> with these buttons, want show different menus/overlays. overlays looks this:
<!-- menu1 --> <div class="overlay overlay-hugeinc"> <button type="button" class="overlay-close">close</button> <nav> <ul> <li><a class="menuitem1">menu1</a></li> <li><a class="menuitem2">item2</a></li> </ul> </nav> </div> <!-- menu2 --> <div class="overlay overlay-hugeinc"> <button type="button" class="overlay-close">close</button> <nav> <ul> <li><a class="menuitem1">menu2</a></li> <li><a class="menuitem2">item1</a></li> </ul> </nav> </div> <!-- menu3 --> <div class="overlay overlay-hugeinc"> <button type="button" class="overlay-close">close</button> <nav> <ul> <li><a class="menuitem1">menu3</a></li> <li><a class="menuitem2">item1</a></li> </ul> </nav> </div> the js is:
(function() { var triggerbuttons = document.getelementsbyclassname( 'trigger-overlay' ), overlay = document.queryselector( 'div.overlay' ), closebttn = overlay.queryselector( 'button.overlay-close' ); transendeventnames = { 'webkittransition': 'webkittransitionend', 'moztransition': 'transitionend', 'otransition': 'otransitionend', 'mstransition': 'mstransitionend', 'transition': 'transitionend' }, transendeventname = transendeventnames[ modernizr.prefixed( 'transition' ) ], support = { transitions : modernizr.csstransitions }; function toggleoverlay() { if( classie.has( overlay, 'open' ) ) { classie.remove( overlay, 'open' ); classie.add( overlay, 'close' ); var onendtransitionfn = function( ev ) { if( support.transitions ) { if( ev.propertyname !== 'visibility' ) return; this.removeeventlistener( transendeventname, onendtransitionfn ); } classie.remove( overlay, 'close' ); }; if( support.transitions ) { overlay.addeventlistener( transendeventname, onendtransitionfn ); } else { onendtransitionfn(); } } else if( !classie.has( overlay, 'close' ) ) { classie.add( overlay, 'open' ); } } (var = 0; < triggerbuttons.length; i++) { triggerbuttons[i].addeventlistener( 'click', toggleoverlay ); } closebttn.addeventlistener( 'click', toggleoverlay ); })(); my problem is menu1 showing. script otherwise working, menu2 , menu3 not showing.
im thinking has missing function toggleoverlay. maybe $(this) or (sorry js not used be). im looping through triggerbuttons , google chrome dev "right" button clicked (i think, hard tell).
expected result: if press button 3 in order, menu 3 show. if press button 2 should see menu 2, , on.
this code fix issue. i've added red , blue css classes close , open respectively, visible.
(function() { var triggerbuttons = document.getelementsbyclassname('trigger-overlay'), overlay = document.queryselectorall('div.overlay'); var closebuttons = []; (var = 0; < overlay.length; i++) { var closebttn = overlay[i].queryselector('button.overlay-close'); closebuttons.push(closebttn); } transendeventnames = { 'webkittransition': 'webkittransitionend', 'moztransition': 'transitionend', 'otransition': 'otransitionend', 'mstransition': 'mstransitionend', 'transition': 'transitionend' }, transendeventname = transendeventnames[modernizr.prefixed('transition')], support = { transitions: modernizr.csstransitions }; function toggleoverlay(overlay) { if (classie.has(overlay, 'open')) { classie.remove(overlay, 'open'); classie.add(overlay, 'close'); var onendtransitionfn = function(ev) { if (support.transitions) { if (ev.propertyname !== 'visibility') return; this.removeeventlistener(transendeventname, onendtransitionfn); } classie.remove(overlay, 'close'); }; if (support.transitions) { overlay.addeventlistener(transendeventname, onendtransitionfn); } else { onendtransitionfn(); } } else { classie.add(overlay, 'open'); classie.remove(overlay, 'close'); } } (var = 0; < triggerbuttons.length; i++) { triggerbuttons[i].addeventlistener('click', (function(i) { return function() { toggleoverlay(overlay[i]) }; })(i)); } (var = 0; < closebuttons.length; i++) { closebuttons[i].addeventlistener('click', (function(i) { return function() { toggleoverlay(overlay[i]) }; })(i)); } })();.overlay.close { background-color: red; } .overlay.open { background-color: blue; }<script src="https://cdnjs.cloudflare.com/ajax/libs/classie/1.0.1/classie.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script> <p> <button class="trigger-overlay" type="button">open overlay 1</button> </p> <p> <button class="trigger-overlay" type="button">open overlay 2</button> </p> <p> <button class="trigger-overlay" type="button">open overlay 3</button> </p> <!-- menu1 --> <div class="overlay overlay-hugeinc close"> <button type="button" class="overlay-close">close</button> <nav> <ul> <li><a class="menuitem1">menu1</a> </li> <li><a class="menuitem2">item2</a> </li> </ul> </nav> </div> <!-- menu2 --> <div class="overlay overlay-hugeinc close"> <button type="button" class="overlay-close">close</button> <nav> <ul> <li><a class="menuitem1">menu2</a> </li> <li><a class="menuitem2">item1</a> </li> </ul> </nav> </div> <!-- menu3 --> <div class="overlay overlay-hugeinc close"> <button type="button" class="overlay-close">close</button> <nav> <ul> <li><a class="menuitem1">menu3</a> </li> <li><a class="menuitem2">item1</a> </li> </ul> </nav> </div>queryselectorall should have been used instead on queryselector getting overlays. , since each overlay contains close button iterated on them add event listeners clicking. used closure keep index of button.
your toggleoverlay has logic problems. isn't in scope of question. didn't fix it.
update fixed toggleoverlay issue.
Comments
Post a Comment