Verwenden unbegrenzter Argumente in JavaScript-Funktion

Question

'use strict' 
var popup1Initer = document.querySelectorAll('.popup-1-initer'), 
    popup2Initer = document.querySelectorAll('.popup-2-initer'), 
    popup3Initer = document.querySelectorAll('.popup-3-initer'); 


open (popup1Initer, popup2Initer, popup3Initer); 

function open() { 
    for (var i = 0; i < arguments.length; i++) { 
    for (var n = 0; n < arguments[i].length; n++) {     
    arguments[i][n].addEventListener('click', function() { 
     switch (this) { 
     case popup1Initer: 
      show(overlay, popup1); 
      break; 
     case popup2Initer: 
      show(overlay, popup2); 
      break; 
     case popup3Initer: 
      show(overlay, popup3); 
      break; 
     default: 
      console.log('no popups'); 
      break; 
     } 
    } 
    }); 
} 

Wie kombiniere ich querySelectorAll und Pseudoarray-Argumente in verschachtelten Schleifen? Ich habe eine mehrere Klassen (2x Popup-1-Initiator, 2x Popup-2-Initiator, 2x Popup-3-Initiator) in DOM, die ein Popup-by-Click-Ereignis öffnet.

Answer 1

1./

Ich fixiere den Code: Länge -> Länge und Klammer Spiel

2./

Die this innerhalb des Klick Zuhörer ein Knotenelement ist aus diesem Grund Sie sollten für die Klassennamen (this.className)

'use strict' 
var popup1Initer = document.querySelectorAll('.popup-1-initer'), 
    popup2Initer = document.querySelectorAll('.popup-2-initer'), 
    popup3Initer = document.querySelectorAll('.popup-3-initer'); 

open (popup1Initer, popup2Initer, popup3Initer); 

function open() { 
    for (var i = 0; i < arguments.length; i++) { 
    for (var n = 0; n < arguments[i].length; n++) { 
    arguments[i][n].addEventListener('click', function() { 
     switch (this.className) { 
     case 'popup-1-initer': 
      show(overlay, popup1); 
      break; 
     case 'popup-2-initer': 
      show(overlay, popup2); 
      break; 
     case 'popup-3-initer': 
      show(overlay, popup3); 
      break; 
     default: 
      console.log('no popups'); 
      break; 
     } 
    }) 
    } 
    } 
} 

//added for testing 
var overlay = 'overlay', 
    popup1 = 'popup1', 
    popup2 = 'popup2', 
    popup3 = 'popup3'; 

function show(p1,p2){ 
    console.log(p1,p2) 
} 

fragen

aber Sie können den Code vereinfachen.

'use strict' 
var popupIniter = document.querySelectorAll('.popup-1-initer, .popup-2-initer, .popup-3-initer'); 

open (popupIniter); 

function open (list) { 
    for (var i = 0; i < list.length; i++) { 
    list[i].addEventListener('click', function() { 
     switch (this.className) { 
     case 'popup-1-initer': 
      show(overlay, popup1); 
      break; 
     case 'popup-2-initer': 
      show(overlay, popup2); 
      break; 
     case 'popup-3-initer': 
      show(overlay, popup3); 
      break; 
     default: 
      console.log('no popups'); 
      break; 
     } 
    }) 
    } 
} 

//added for testing 
var overlay = 'overlay', 
    popup1 = 'popup1', 
    popup2 = 'popup2', 
    popup3 = 'popup3'; 

function show(p1,p2){ 
    console.log(p1,p2) 
} 

https://jsfiddle.net/3v00afhc/

Neben schlage ich Daten-Attribut zu verwenden, aber ich nehme an, Sie nicht den Code html ändern

somethong wie:

'use strict' 
var popupIniter = document.querySelectorAll('[data-popup-initer]') 

function selectPopUp(elem) { 
    var popup = parseInt(this.getAttribute('data-popup-initer')); 
    switch (popup) { 
     case 1: 
      show(overlay, popup1); 
      break; 
     case 2: 
      show(overlay, popup2); 
      break; 
     case 3: 
      show(overlay, popup3); 
      break; 
     default: 
      console.log('no popups'); 
      break; 
    } 
} 

function addPopListeners(popupIniter) { 
    for (var i = 0; i < popupIniter.length; i++) { 
     popupIniter[i].addEventListener('click', selectPopUp) 
    } 
} 

addPopListeners(popupIniter); 

//added for testing 
var overlay = 'overlay', 
    popup1 = 'popup1', 
    popup2 = 'popup2', 
    popup3 = 'popup3'; 

function show(p1, p2) { 
    console.log(p1, p2) 
} 

https://jsfiddle.net/78qywopm/