'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),它通过click事件打开一个弹出窗口。
答案 0 :(得分:0)
1个./
我修复了代码: 长度 - &gt;长度和 括号匹配
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代码
某些人喜欢:'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)
}