如何在具有相同类的多个HTML div上使用相同的javascript函数

Question

所以，我在一个网站上工作，我有一个功能可以在按下按钮时扩展和收缩div元素，但我希望在同一页面上有许多相同的div，而不为每个div制作单独的JS文件。我想知道我需要做什么。HTML、CSS和JS下面简要解释了我正在做的事情：

因此，基本上我在HTML中有一堆类，然后通过JS，我将projectDescriptionExpand类作为目标，并切换showmore类。通过这样做，我将显示从"none"更改为"inline"。现在我正试图在HTML中添加另一行，但我不知道如何添加。我尝试使用querySelectorAll并通过for循环运行JS，但似乎不起作用。

谢谢！！

HTML:

<!-- START OF THE PROJECT HIGHLIGHTS -->
<div class="row projectHighlightHead greyHighlight">
<!-- Project description and graphic row -->
<div class="col-6 justify-content-center" style="padding-right: 7%"> 
<div class="row"> 
<!-- PROJECT NAME -->
<h2 class="projectNameExpand">Project Name</h2>
<div class="easyButtons"> 
<!-- DATE AND STATUS BUTTONS -->
<button class="yearStatus" disabled>20XX</button>
<button class="yearStatus" disabled>Status</button>
</div>
<p class="projectDescriptionExpand"> <strong> Brief project description.</strong> Lorem ipsum Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sem neque venenatis dolor fermentum massa nec<span class="ellipse">...</span><span class="readMore">, auctor mi. Aliquet feugiat rhoncus, egestas integer ultricies facilisi sem neque dolor.</span></p>
<button class="viewProject">View Project</button>
<div class="collapsed"> 
<!-- INSERT THE INSTAGRAM LINK IN THE QUOTE MARKS -->
<a href="LINK!!">  
<button class="instagramButton"><img style="max-width: 100%;" src="./assets/photos/insta_icon.png"></button>
</a> 
<a href="LINK!!"> 
<button class="projButtons">Case Study</button>
</a>
<a href="LINK!!"> 
<button class="projButtons">Project Link</button>
</a>
</div>
</div>
</div>

CSS：

.greyHighlight {
background-color: #f4f5f6;
padding-top: 80px;
padding-bottom: 160px;
}
.whiteHighlight {
background-color: white;
padding-top: 80px;
padding-bottom: 160px;
}
.projectNameExpand {
font-size: 65px;
font-family: GreycliffBold;
color: black;
width: 100%;
margin-bottom: 10px;
}
.expand {
margin-left: -12%;
margin-top: 50px;
}
.viewProject {
background-color: transparent;
border-style: solid;
border-color: black;
border-width: 1px;
border-radius: 3px;
padding: 5px 30px;
position: absolute;
bottom: -80px;
font-family: GreycliffBold;
color: black;
font-size: 25px;
}
.projectDescriptionExpand {
font-family: GreycliffReg;
font-size: 25px;
}
.readMore {
display: none;
}
.show-more .readMore {
display: inline;
}
.projectImageExpand {
max-width: 80%;
box-shadow: 10px -10px #66ffcc;
}
.projectDescription .ellipse {
display: none;
}
.show-more .ellipse {
display: none;
}
.collapsed {
display: none;
}
.show-more {
display: inline;
}
.projectHighlightHead {
padding-left: 12%;
}

JS:

const viewProjectButton = document.querySelectorAll(".viewProject");
const projDescription = document.querySelectorAll("projectDescription");
for(var i = 0; i < viewProjectButton.length; i++) { 
viewProjectButton[i].addEventListener('click', (e)=>{
document.getElementsByClassName(".projectDescriptionExpand").classList.toggle('show-more');
document.getElementsByClassName(".collapsed").classList.toggle('show-more');
if(viewProjectButton[i].innerText === "View Project") {
viewProjectButton[i].innerText = "Close Project";
viewProjectButton[i].style.color = "white";
viewProjectButton[i].style.backgroundColor = "black";
}
else {
viewProjectButton[i].innerText = "View Project";
viewProjectButton[i].style.color = "black";
viewProjectButton[i].style.backgroundColor = "white";
}
})
}

Answer 1

您可以委托并在document上设置一个监听器，而不是在每个按钮上设置监听器，然后检查是否是正在单击的按钮。

要查找要切换的关联元素，可以使用closest()查找公共父元素，然后使用querySelector深入了解元素本身。我添加了一个类.project来定义父标记。

window.addEventListener('DOMContentLoaded', () => {
document.addEventListener('click', e => {
if (e.target.classList.contains('viewProject')) {
let myParent = e.target.closest('.project');
myParent.querySelector('.collapsed').classList.toggle('show-more');
myParent.querySelector('.projectDescriptionExpand').classList.toggle('show-more');
if (myParent.querySelector('.collapsed').classList.contains('show-more')) {
e.target.innerText = "Close Project";
e.target.style.color = "white";
e.target.style.backgroundColor = "black";
} else {
e.target.innerText = "View Project";
e.target.style.color = "black";
e.target.style.backgroundColor = "white";
}
}
})
})

.greyHighlight {
background-color: #f4f5f6;
padding-top: 80px;
padding-bottom: 160px;
}
.whiteHighlight {
background-color: white;
padding-top: 80px;
padding-bottom: 160px;
}
.projectNameExpand {
font-size: 65px;
font-family: GreycliffBold;
color: black;
width: 100%;
margin-bottom: 10px;
}
.expand {
margin-left: -12%;
margin-top: 50px;
}
.viewProject {
background-color: transparent;
border-style: solid;
border-color: black;
border-width: 1px;
border-radius: 3px;
padding: 5px 30px;
position: absolute;
bottom: -80px;
font-family: GreycliffBold;
color: black;
font-size: 25px;
}
.projectDescriptionExpand {
font-family: GreycliffReg;
font-size: 25px;
}
.readMore {
display: none;
}
.show-more .readMore {
display: inline;
}
.projectImageExpand {
max-width: 80%;
box-shadow: 10px -10px #66ffcc;
}
.projectDescription .ellipse {
display: none;
}
.show-more .ellipse {
display: none;
}
.collapsed {
display: none;
}
.show-more {
display: inline;
}
.projectHighlightHead {
padding-left: 12%;
}

<!-- START OF THE PROJECT HIGHLIGHTS -->
<div class="row projectHighlightHead greyHighlight">
<!-- Project description and graphic row -->
<div class="col-6 justify-content-center" style="padding-right: 7%">
<div class="row project">
<!-- PROJECT NAME -->
<h2 class="projectNameExpand">Project Name</h2>
<div class="easyButtons">
<!-- DATE AND STATUS BUTTONS -->
<button class="yearStatus" disabled>20XX</button>
<button class="yearStatus" disabled>Status</button>
</div>
<p class="projectDescriptionExpand"> <strong> Brief project description.</strong> Lorem ipsum Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sem neque venenatis dolor fermentum massa nec<span class="ellipse">...</span><span class="readMore">, auctor mi. Aliquet feugiat rhoncus, egestas integer ultricies facilisi sem neque dolor.</span></p>
<button class="viewProject">View Project</button>
<div class="collapsed">
<!-- INSERT THE INSTAGRAM LINK IN THE QUOTE MARKS -->
<a href="LINK!!">
<button class="instagramButton"><img style="max-width: 100%;" src="./assets/photos/insta_icon.png"></button>
</a>
<a href="LINK!!">
<button class="projButtons">Case Study</button>
</a>
<a href="LINK!!">
<button class="projButtons">Project Link</button>
</a>
</div>
</div>
</div>

您可以通过在.project上设置一个active类，然后使用css规则来显示/隐藏中的元素，从而进一步减少代码

window.addEventListener('DOMContentLoaded', () => {
document.addEventListener('click', e => {
if (e.target.classList.contains('viewProject')) {
e.target.closest('.project').classList.toggle('active');
}
})
})

.greyHighlight {
background-color: #f4f5f6;
padding-top: 80px;
padding-bottom: 160px;
}
.whiteHighlight {
background-color: white;
padding-top: 80px;
padding-bottom: 160px;
}
.projectNameExpand {
font-size: 65px;
font-family: GreycliffBold;
color: black;
width: 100%;
margin-bottom: 10px;
}
.expand {
margin-left: -12%;
margin-top: 50px;
}
.viewProject {
background-color: transparent;
border-style: solid;
border-color: black;
border-width: 1px;
border-radius: 3px;
padding: 5px 30px;
position: absolute;
bottom: -80px;
font-family: GreycliffBold;
color: black;
font-size: 25px;
}
.projectDescriptionExpand {
font-family: GreycliffReg;
font-size: 25px;
}
.readMore {
display: none;
}
.project.active .readMore {
display: inline;
}
.projectImageExpand {
max-width: 80%;
box-shadow: 10px -10px #66ffcc;
}
.projectDescription .ellipse {
display: none;
}
.project.active .projectDescription .ellipse {
display: none;
}
.collapsed {
display: none;
}
.project.active .collapsed {
display: inline;
}
.projectHighlightHead {
padding-left: 12%;
}
.viewProject {
content: "View Project";
color: #000;
background: #fff;
}
.project.active .viewProject {
content: "Close Project";
color: #fff;
background: #000;
}

<!-- START OF THE PROJECT HIGHLIGHTS -->
<div class="row projectHighlightHead greyHighlight">
<!-- Project description and graphic row -->
<div class="col-6 justify-content-center" style="padding-right: 7%">
<div class="row project">
<!-- PROJECT NAME -->
<h2 class="projectNameExpand">Project Name</h2>
<div class="easyButtons">
<!-- DATE AND STATUS BUTTONS -->
<button class="yearStatus" disabled>20XX</button>
<button class="yearStatus" disabled>Status</button>
</div>
<p class="projectDescriptionExpand"> <strong> Brief project description.</strong> Lorem ipsum Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sem neque venenatis dolor fermentum massa nec<span class="ellipse">...</span><span class="readMore">, auctor mi. Aliquet feugiat rhoncus, egestas integer ultricies facilisi sem neque dolor.</span></p>
<button class="viewProject">View Project</button>
<div class="collapsed">
<!-- INSERT THE INSTAGRAM LINK IN THE QUOTE MARKS -->
<a href="LINK!!">
<button class="instagramButton"><img style="max-width: 100%;" src="./assets/photos/insta_icon.png"></button>
</a>
<a href="LINK!!">
<button class="projButtons">Case Study</button>
</a>
<a href="LINK!!">
<button class="projButtons">Project Link</button>
</a>
</div>
</div>
</div>

Answer 2

与上面的注释一样，最好使用事件委派，将事件从文档节点delegate传递到viewProject节点。您只需检查当前目标是否具有类viewProject即可完成此操作。

getElementsByClassName需要没有.的类名，然后使用[0]选择获得的第一个元素

if condition与innerText的检查不太好，因为如果文本发生更改，那么代码就会中断。最好使用data-html属性。

document.addEventListener('click', event => {
if (event.target.classList.contains('viewProject')) {
clickViewProject(event.target)
}
})
function clickViewProject (node) {
const desc = document.getElementsByClassName('projectDescriptionExpand')[0]
desc.classList.toggle('show-more')
const collapsed = document.getElementsByClassName('collapsed')[0]
collapsed.classList.toggle('show-more')

// .. add the rest of the code
if (node.innerText === "View Project") {
node.innerText = "Close Project"
node.style.color = "white"
node.style.backgroundColor = "black"
} else {
node.innerText = "View Project"
node.style.color = "black"
node.style.backgroundColor = "white"
}
}

.greyHighlight {
background-color: #f4f5f6;
padding-top: 80px;
padding-bottom: 160px;
}
.whiteHighlight {
background-color: white;
padding-top: 80px;
padding-bottom: 160px;
}
.projectNameExpand {
font-size: 65px;
font-family: GreycliffBold;
color: black;
width: 100%;
margin-bottom: 10px;
}
.expand {
margin-left: -12%;
margin-top: 50px;
}
.viewProject {
background-color: transparent;
border-style: solid;
border-color: black;
border-width: 1px;
border-radius: 3px;
padding: 5px 30px;
position: absolute;
bottom: -80px;
font-family: GreycliffBold;
color: black;
font-size: 25px;
}
.projectDescriptionExpand {
font-family: GreycliffReg;
font-size: 25px;
}
.readMore {
display: none;
}
.show-more .readMore {
display: inline;
}
.projectImageExpand {
max-width: 80%;
box-shadow: 10px -10px #66ffcc;
}
.projectDescription .ellipse {
display: none;
}
.show-more .ellipse {
display: none;
}
.collapsed {
display: none;
}
.show-more {
display: inline;
}
.projectHighlightHead {
padding-left: 12%;
}

<div class="row projectHighlightHead greyHighlight">
<!-- Project description and graphic row -->
<div class="col-6 justify-content-center" style="padding-right: 7%"> 
<div class="row"> 
<!-- PROJECT NAME -->
<h2 class="projectNameExpand">Project Name</h2>
<div class="easyButtons"> 
<!-- DATE AND STATUS BUTTONS -->
<button class="yearStatus" disabled>20XX</button>
<button class="yearStatus" disabled>Status</button>
</div>
<p class="projectDescriptionExpand"> <strong> Brief project description.</strong> Lorem ipsum Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sem neque venenatis dolor fermentum massa nec<span class="ellipse">...</span><span class="readMore">, auctor mi. Aliquet feugiat rhoncus, egestas integer ultricies facilisi sem neque dolor.</span></p>
<button class="viewProject">View Project</button>
<div class="collapsed"> 
<!-- INSERT THE INSTAGRAM LINK IN THE QUOTE MARKS -->
<a href="LINK!!">  
<button class="instagramButton"><img style="max-width: 100%;" src="./assets/photos/insta_icon.png"></button>
</a> 
<a href="LINK!!"> 
<button class="projButtons">Case Study</button>
</a>
<a href="LINK!!"> 
<button class="projButtons">Project Link</button>
</a>
</div>
</div>
</div>