遍历dom元素循环使用addEventListener绑定事件无效
HTML模块：
<div class="tab tab1">
<ul class="tab-list">
<li class="tab-item first-floor">
<div class="tab-title">
<h3>Epson Smart Panel</h3>
<h4>（无线应用解决方案）</h4>
</div>
<div class="tab-content first-floor-content">11111</div>
</li>
<li class="tab-item first-floor">
<div class="tab-title">
<h3>Epson Smart Panel</h3>
<h4>（无线应用解决方案）</h4>
</div>
<div class="tab-content first-floor-content">
<div class="menu">
<ul class="menu-list">
<li class="menu-item">
<div class="menu-item-title" collapsed="false">
<i class="iconfont download"></i>
<span>软件下载</span>
</div>
<div class="menu-item-content">
<div class="download-info">
<h5>适用手机系统</h5>
<div class="download-info-class-list">
<div class="download-info-class-item">
<span>iOS系统和设备 : iOS 9.0或以上版本的iPhone/iPod
touch/iPad</span>
</div>
<div class="download-info-class-item">
<span>Android系统和设备 : Android
4.4或以上版本的设备</span>
</div>
<div class="download-info-class-item">
<span>适用机型：</span>
<div class="tab tab2">
<ul class="tab-list">
<li class="tab-item second-floor">
<div class="tab-title2">
<span>DS-360W</span>
</div>
<div class="tab-content second-floor-content">
<div class="qrcode-box">
<div class="qrcode">
<div class="qrcode-img-box">
<img src="./img/bg-img/qrcode.png" />
</div>
<div class="qrcode-intro">
<i class="iconfont iphone"></i>
<span>扫描二维码</span>
<span>下载IOS客户端</span>
</div>
</div>
<div class="qrcode">
<div class="qrcode-img-box">
<img src="./img/bg-img/qrcode.png" />
</div>
<div class="qrcode-intro">
<i class="iconfont android"></i>
<span>扫描二维码</span>
<span>下载IOS客户端</span>
</div>
</div>
</div>
</div>
</li>
<li class="tab-item second-floor">
<div class="tab-title2">
<span>DS-570W</span>
</div>
<div class="tab-content second-floor-content">111</div>
</li>
<li class="tab-item second-floor">
<div class="tab-title2">
<span>DS-1660W</span>
</div>
<div class="tab-content second-floor-content">222</div>
</li>
<li class="tab-item second-floor">
<div class="tab-title2">
<span>ES-60W</span>
</div>
<div class="tab-content second-floor-content">333</div>
</li>
</ul>
<div class="tab-content-container second-floor-container"></div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="menu-item">
<div class="menu-item-title" collapsed="false">
<i class="iconfont install"></i>
<span>安装指南</span>
</div>
<div class="menu-item-content">33333</div>
</li>
<li class="menu-item">
<div class="menu-item-title" collapsed="false">
<i class="iconfont use-guide"></i>
<span>使用指南</span>
</div>
<div class="menu-item-content">22222</div>
</li>
<li class="menu-item">
<div class="menu-item-title" collapsed="true">
<i class="iconfont question"></i>
<span>常见问题</span>
</div>
<div class="collapse-list" style="visibility: hidden">
<div class="collapse-item">
<span>IOS版FAQ</span>
</div>
<div class="collapse-item">
<span>Android版FAQ</span>
</div>
</div>
<div class="menu-item-content">33333</div>
</li>
</ul>
<div class="menu-content-container"></div>
</div>
</div>
</li>
<li class="tab-item first-floor">
<div class="tab-title">
<h3>Epson DS-730N</h3>
<h4>（网络LAN应用解决方案）</h4>
</div>
<div class="tab-content first-floor-content">33333</div>
</li>
</ul>
<div class="tab-content-container first-floor-container"></div>
</div>
JS模块:
function totransFormArr(fakeArr) {
let newArr = [];
fakeArr.forEach((element, index) => {
newArr[index] = fakeArr[index];
});
return newArr;
}
// 当前指示tab的index的值
var tab1Index = 1;
// 这里只取第一层的tab-item
var tab1DomList = totransFormArr(
document.querySelectorAll(" .tab1 .first-floor")
);
var tab1ContentDomList = totransFormArr(
// 这里也需要注意 有重复的节点
document.querySelectorAll(".tab1 .first-floor-content")
);
function initTable1() {
// tab1栏模块
let tabContainer1 = document.querySelector(".tab1 .first-floor-container");
tabContainer1.innerHTML = tab1ContentDomList[tab1Index].innerHTML;
tab1DomList[tab1Index].querySelector(".tab-title").style.color = "#0c89ef";
tab1DomList.forEach((e, index) => {
e.removeChild(tab1ContentDomList[index]);
e.querySelector(".tab-title").addEventListener("click", () => {
let tabContainer1 = document.querySelector(
".tab1 .first-floor-container"
);
let titleDom = e.querySelector(".tab-title");
titleDom.style.color = "#0c89ef";
tabContainer1.innerHTML = tab1ContentDomList[index].innerHTML;
tab1DomList[tab1Index].querySelector(".tab-title").style.color = "#000";
tab1Index = index;
});
});
}
initTable1();
var tab2Index = 0;
var tab2DomList = document.querySelectorAll(".tab2 .tab-list .second-floor");
var tab2ContentDomList = document.querySelectorAll(
".tab2 .second-floor-content"
);
function initTable2() {
// tab2栏模块
let tabContainer2 = document.querySelector(".tab2 .second-floor-container");
tabContainer2.innerHTML = tab2ContentDomList[tab2Index].innerHTML;
tab2DomList[tab2Index].querySelector(".tab-title2").style.color = "#0c89ef";
tab2DomList.forEach((e, index) => {
e.removeChild(tab2ContentDomList[index]);
let titleDom = e.querySelector(".tab-title2");
titleDom.addEventListener("click", () => {
let tabContainer2 = document.querySelector(
".tab2 .second-floor-container"
);
titleDom.style.color = "#0c89ef";
tabContainer2.innerHTML = tab2ContentDomList[index].innerHTML;
tab2DomList[tab2Index].querySelector(".tab-title2").style.color = "#000";
tab2Index = index;
});
});
initTable2();
initTable2时无效
获取不到元素 我给tab2底下的节点新添加了类
tab2组件可以绑定上click事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="tab tab1">
<ul class="tab-list">
<li class="tab-item first-floor">
<div class="tab-title">
<h3>Epson Smart Panel</h3>
<h4>（无线应用解决方案）</h4>
</div>
<div class="tab-content first-floor-content">11111</div>
</li>
<li class="tab-item first-floor">
<div class="tab-title">
<h3>Epson Smart Panel</h3>
<h4>（无线应用解决方案）</h4>
</div>
<div class="tab-content first-floor-content">
<div class="menu">
<ul class="menu-list">
<li class="menu-item">
<div class="menu-item-title" collapsed="false">
<i class="iconfont download"></i>
<span>软件下载</span>
</div>
<div class="menu-item-content">
<div class="download-info">
<h5>适用手机系统</h5>
<div class="download-info-class-list">
<div class="download-info-class-item">
<span>iOS系统和设备 : iOS 9.0或以上版本的iPhone/iPod
touch/iPad</span>
</div>
<div class="download-info-class-item">
<span>Android系统和设备 : Android
4.4或以上版本的设备</span>
</div>
<div class="download-info-class-item">
<span>适用机型：</span>
<div class="tab tab2">
<ul class="tab-list">
<li class="tab-item second-floor">
<div class="tab-title2">
<span>DS-360W</span>
</div>
<div class="tab-content second-floor-content">
<div class="qrcode-box">
<div class="qrcode">
<div class="qrcode-img-box">
<img src="./img/bg-img/qrcode.png" />
</div>
<div class="qrcode-intro">
<i class="iconfont iphone"></i>
<span>扫描二维码</span>
<span>下载IOS客户端</span>
</div>
</div>
<div class="qrcode">
<div class="qrcode-img-box">
<img src="./img/bg-img/qrcode.png" />
</div>
<div class="qrcode-intro">
<i class="iconfont android"></i>
<span>扫描二维码</span>
<span>下载IOS客户端</span>
</div>
</div>
</div>
</div>
</li>
<li class="tab-item second-floor">
<div class="tab-title2">
<span>DS-570W</span>
</div>
<div class="tab-content second-floor-content">111</div>
</li>
<li class="tab-item second-floor">
<div class="tab-title2">
<span>DS-1660W</span>
</div>
<div class="tab-content second-floor-content">222</div>
</li>
<li class="tab-item second-floor">
<div class="tab-title2">
<span>ES-60W</span>
</div>
<div class="tab-content second-floor-content">333</div>
</li>
</ul>
<div class="tab-content-container second-floor-container"></div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="menu-item">
<div class="menu-item-title" collapsed="false">
<i class="iconfont install"></i>
<span>安装指南</span>
</div>
<div class="menu-item-content">33333</div>
</li>
<li class="menu-item">
<div class="menu-item-title" collapsed="false">
<i class="iconfont use-guide"></i>
<span>使用指南</span>
</div>
<div class="menu-item-content">22222</div>
</li>
<li class="menu-item">
<div class="menu-item-title" collapsed="true">
<i class="iconfont question"></i>
<span>常见问题</span>
</div>
<div class="collapse-list" style="visibility: hidden">
<div class="collapse-item">
<span>IOS版FAQ</span>
</div>
<div class="collapse-item">
<span>Android版FAQ</span>
</div>
</div>
<div class="menu-item-content">33333</div>
</li>
</ul>
<div class="menu-content-container"></div>
</div>
</div>
</li>
<li class="tab-item first-floor">
<div class="tab-title">
<h3>Epson DS-730N</h3>
<h4>（网络LAN应用解决方案）</h4>
</div>
<div class="tab-content first-floor-content">33333</div>
</li>
</ul>
<div class="tab-content-container first-floor-container"></div>
</div>
</body>
<script>
function totransFormArr(fakeArr) {
let newArr = [];
fakeArr.forEach((element, index) => {
newArr[index] = fakeArr[index];
});
return newArr;
}
// 当前指示tab的index的值
var tab1Index = 1;
// 这里只取第一层的tab-item
var tab1DomList = totransFormArr(
document.querySelectorAll(" .tab1 .first-floor")
);
var tab1ContentDomList = totransFormArr(
// 这里也需要注意 有重复的节点
document.querySelectorAll(".tab1 .first-floor-content")
);
function initTable1() {
// tab1栏模块
let tabContainer1 = document.querySelector(".tab1 .first-floor-container");
tabContainer1.innerHTML = tab1ContentDomList[tab1Index].innerHTML;
tab1DomList[tab1Index].querySelector(".tab-title").style.color = "#0c89ef";
tab1DomList.forEach((e, index) => {
e.removeChild(tab1ContentDomList[index]);
e.querySelector(".tab-title").addEventListener("click", () => {
let tabContainer1 = document.querySelector(
".tab1 .first-floor-container"
);
let titleDom = e.querySelector(".tab-title");
titleDom.style.color = "#0c89ef";
tabContainer1.innerHTML = tab1ContentDomList[index].innerHTML;
tab1DomList[tab1Index].querySelector(".tab-title").style.color = "#000";
tab1Index = index;
});
});
}
initTable1();
var tab2Index = 0;
var tab2DomList = document.querySelectorAll(".tab2 .tab-list .second-floor");
var tab2ContentDomList = document.querySelectorAll(
".tab2 .second-floor-content"
);
function initTable2() {
// tab2栏模块
let tabContainer2 = document.querySelector(".tab2 .second-floor-container");
tabContainer2.innerHTML = tab2ContentDomList[tab2Index].innerHTML;
tab2DomList[tab2Index].querySelector(".tab-title2").style.color = "#0c89ef";
tab2DomList.forEach((e, index) => {
e.removeChild(tab2ContentDomList[index]);
let titleDom = e.querySelector(".tab-title2");
titleDom.addEventListener("click", () => {
alert("9999")
let tabContainer2 = document.querySelector(
".tab2 .second-floor-container"
);
titleDom.style.color = "#0c89ef";
tabContainer2.innerHTML = tab2ContentDomList[index].innerHTML;
tab2DomList[tab2Index].querySelector(".tab-title2").style.color = "#000";
tab2Index = index;
});
});
}
initTable2();
</script>
</html>
点击事件加上了啊