在 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 和伪数组参数？我在 DOM 中有多个 类（2x popup-1-initer，2x popup-2-initer，2x popup-3-initer），通过点击事件打开弹出窗口。

Answer 1

1./

我修改代码： 长度 -> 长度和 括号匹配

2./

点击监听器中的this是一个节点元素，因此你应该要求class名称（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 代码

类似于：

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