我有重复的变量声明，我认为它们可以通过for循环来改进，但是我的尝试失败了。
我尝试了数组的for-loop声明器，但我的语法不起作用。
我有一个“工作代码”：
<div class ="menu1 item1-1"></div>
<div class ="menu1 item1-2"></div>
<div class ="menu1 item1-3"></div>
<div class ="menu1 item1-4"></div>
<div class ="menu2 item2-1"></div>
<div class ="menu2 item2-2"></div>
<div class ="menu2 item2-3"></div>
<div class ="menu2 item2-4"></div>
<div class ="menu3 item3-1"></div>
<div class ="menu3 item3-2"></div>
<div class ="menu3 item3-3"></div>
<div class ="menu3 item3-4"></div>
<div class ="menu4 item4-1"></div>
<div class ="menu4 item4-2"></div>
<div class ="menu4 item4-3"></div>
<div class ="menu4 item4-4"></div>
var menu1 = document.getElementsByClassName('menu1');
var menu2 = document.getElementsByClassName('menu2');
var menu3 = document.getElementsByClassName('menu3');
var menu4 = document.getElementsByClassName('menu4');
for (let i = 1; i < menu1.length; i++) {
menu1[i].addEventListener('click', function(){ menu1[i].classList.add("test"); });
}
for (let i = 1; i < menu2.length; i++) {
menu2[i].addEventListener('click', function(){ menu2[i].classList.add("test"); });
}
for (let i = 1; i < menu3.length; i++) {
menu3[i].addEventListener('click', function(){ menu3[i].classList.add("test"); });
}
for (let i = 1; i < menu4.length; i++) {
menu4[i].addEventListener('click', function(){ menu4[i].classList.add("test"); });
}
我试图减少它是这样的：
var MENU = [];
for (let i = 1; i <= 4; i++) {
MENU.push("menu" + i + =document.getElementsByClassName('menu' + i +));
}
for (let j = 1; j < 5; j++) {
for (let i = 0; i < MENU[j].length; i++) {
MENU[j][i].addEventListener('click', function(){ MENU[j][i].classList.add("test"); });
}
}
预期结果：
与“工作代码”相同的结果：
当我单击“menu1”div时：
<div class ="menu1 item1-1 test"></div>
<div class ="menu1 item1-2 test"></div>
<div class ="menu1 item1-3 test"></div>
<div class ="menu1 item1-4 test"></div>
<div class ="menu2 item2-1"></div>
<div class ="menu2 item2-2"></div>
<div class ="menu2 item2-3"></div>
<div class ="menu2 item2-4"></div>
<div class ="menu3 item3-1"></div>
<div class ="menu3 item3-2"></div>
<div class ="menu3 item3-3"></div>
<div class ="menu3 item3-4"></div>
<div class ="menu4 item4-1"></div>
<div class ="menu4 item4-2"></div>
<div class ="menu4 item4-3"></div>
<div class ="menu4 item4-4"></div>
实际错误消息：“意外标记=”“未捕获的TypeError：菜单[0][i].AddEventListener不是函数”
编辑：我发现了一个巨大的语法错误，已经修复了，但我现在得到了这个错误。
编辑2：我的问题太公开了，不太具体，我缩小了范围，修正了一些评论建议的语法。
编辑3：我正在努力：
单击一个“Menu1”元素以选择所有“Menu1”元素。单击一个“menu2”元素以选择所有“menu2”元素。单击一个“Menu3”元素以选择所有“Menu3”元素。单击一个“Menu4”元素以选择所有“Menu4”元素。
可以使用QuerySelectorAll。
类似这样的事情：
const selector = '';
for (let i = 1; i <= 4; i++) {
selector += `${selector ? ', ' : ''}menu${i}, panel${i}, navprev${i}, navrtrn${i}, navnext${i}`
}
document.querySelectorAll(selector).forEach(element => {
element.addEventListener('click', (event) => {
// check if it is a menu:
if (event.target.matches('[class^=menu]')) {
// a menu was clicked
}
});
});
如果您不想更改任何其他代码，可以这样做：
const classNamePrefixes = ['menu', 'panel', 'navprev', 'navrtrn', 'navnext'];
const varNameAndClassNamePrefix = classNamePrefixes.map((cnp) => {
const varName = cnp.replace('nav', '').replace('panel', 'panl');
return {
varName,
cnp
};
});
for (let i = 1; i <= 4; i++) {
varNameAndClassNamePrefix.forEach(({ varName, cnp }) => {
window[`${varName}${i}`] = document.getElementsByClassName(`${cnp}${i}`)
});
}
向每个menu或panl等添加泛型类，例如:menu。以便您的元素看起来像：
<div class="menu menu1"></div>
<div class="menu menu2"></div>
<div class="menu menu3"></div>
<div class="menu menu4"></div>
现在您可以使用单个选择器选择所有元素。
var menus = document.getElementsByClassName('menu');
console.log(menus[0]); // <div class="menu menu1"></div>
console.log(menus[1]); // <div class="menu menu2"></div>
console.log(menus[2]); // <div class="menu menu3"></div>
console.log(menus[3]); // <div class="menu menu4"></div>
并且它们存储在HTMLCollection中，您可以使用for循环来循环该HTMLCollection。
for (var i = 0; i < menus.length; i++) {
console.log(menus[i]); // Logs each <div class="menu"> element.
}
查看MDN的文档以查看有关如何使用getElementsByClassName方法的更多示例。
为什么不给他们另外一个特殊属性，比如
const selectors=document.queryselectorall（“[specialAttribute]”）；一样使用选择器
