JavaScript関数で無制限の引数を使用する

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; 
     } 
    } 
    }); 
} 

入れ子になったループでquerySelectorAll引数とpseudoarray引数を組み合わせるにはどうすればよいですか？ DOM内に複数のクラス（2xポップアップ1-initer、2x popup-2-initer、2x popup-3-initer）があり、クリックイベントによってポップアップが開きます。

Answer 1

1/

私は、コードを修正する： な長さ - >長さと 括弧の試合

2/

thisクリックリスナーの内部には、このような理由のために、ノード要素でありますクラス名（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) 
} 

https://jsfiddle.net/5ohm0jfv/

ただし、コードを簡略化することができます。

'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/

は同様に私は、データの属性を使用することをお勧め、私はあなたがhtmlコード

somethongのように変更することはできませんとします

'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/

を