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

Question

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

所以基本上我在 HTML 中有一堆类，然后通过 JS 我定位 projectDescriptionExpand 类并切换 show-more 类。 通过这样做，我将显示从“无”更改为“内联”。 现在我试图在我的 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 if condition检查，则不是那么好，因为如果文本发生变化，那么您的代码就会中断。 最好为此使用数据 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>