如何使功能可重用？

Question

我正在尝试将此功能应用于多个项目，并且我不想重复。 我如何在Vanilla JS中做到这一点？ 请参见下面的代码。

 let slideIndex = 1; showDivs(slideIndex); function plusDivs(n) { showDivs(slideIndex += n); } function showDivs(n) { let i; let x = document.getElementsByClassName("slides"); if (n > x.length) { slideIndex = 1 } if (n < 1) { slideIndex = x.length } for (i = 0; i < x.length; i++) { x[i].style.display = "none"; } x[slideIndex - 1].style.display = "block"; document.getElementsByClassName("pagination")[0].innerText = slideIndex + ' / ' + x.length; } 

 <div class="project1"> <div class="pagination"></div> <div class="imgslide noselect"> <div class="prev" onclick="plusDivs(-1)"></div> <div class="next" onclick="plusDivs(1)"></div> <img class="slides" src="img/project-1/Scan-4.jpg"> <!-- <img class="slides" src="img/Scan-8.jpg"> --> <img class="slides" src="img/project-1/Scan-24.jpg"> <img class="slides" src="img/project-1/Scan-35.jpg"> <img class="slides" src="img/project-1/Scan-39.jpg"> <img class="slides" src="img/project-1/Scan-40.jpg"> </div> </div> <div class="project2"> <div class="pagination"></div> <div class="imgslide noselect"> <div class="prev" onclick="plusDivs(-1)"></div> <div class="next" onclick="plusDivs(1)"></div> <img class="slides" src="img/project-1/Scan-41.jpg"> <!-- <img class="slides" src="img/Scan-8.jpg"> --> <img class="slides" src="img/project-1/Scan-22.jpg"> <img class="slides" src="img/project-1/Scan-33.jpg"> <img class="slides" src="img/project-1/Scan-38.jpg"> <img class="slides" src="img/project-1/Scan-49.jpg"> </div> </div> 

类别为project1和project2应该分开，并且一旦单击该函数即可更改图像。 我想对多个项目应用相同的功能，而不必每次都重写。

Answer 1

而不是获取所有幻灯片document.getElementsByClassName("slides")您应该获取适当的项目document.getElementById("projectN").getElementsByClassName("slides") 。 您必须更改这两个函数，才能接受用于指定项目的另一个参数。

 let projectIndexes = { project1: 1, project2: 1 } showDivs("project1", projectIndexes.project1); showDivs("project2", projectIndexes.project2); function plusDivs(project, n) { showDivs(project, projectIndexes[project] += n); } function showDivs(project, index) { let i; let x = document.getElementById(project).getElementsByClassName("slides"); if (index > x.length) { index = 1 } if (index < 1) { index = x.length } for (i = 0; i < x.length; i++) { x[i].style.display = "none"; } x[index - 1].style.display = "block"; document.getElementById(project).getElementsByClassName("pagination")[0].innerText = index + ' / ' + x.length; projectIndexes[project] = index; } 

 .slides { display: none; } 

 <div id="project1"> <div class="pagination"></div> <div class="imgslide noselect"> <button class="prev" onclick="plusDivs('project1', -1)">Previous</button> <button class="next" onclick="plusDivs('project1', 1)">Next</button> <img class="slides" src="img/project-1/Scan-4.jpg" alt="project1 slide1"> <img class="slides" src="img/project-1/Scan-24.jpg" alt="project1 slide2"> <img class="slides" src="img/project-1/Scan-35.jpg" alt="project1 slide3"> <img class="slides" src="img/project-1/Scan-39.jpg" alt="project1 slide4"> <img class="slides" src="img/project-1/Scan-40.jpg" alt="project1 slide5"> </div> </div> <br /> <div id="project2"> <div class="pagination"></div> <div class="imgslide noselect"> <button class="prev" onclick="plusDivs('project2', -1)">Previous</button> <button class="next" onclick="plusDivs('project2', 1)">Next</button> <img class="slides" src="img/project-1/Scan-41.jpg" alt="project2 slide1"> <img class="slides" src="img/project-1/Scan-22.jpg" alt="project2 slide2"> <img class="slides" src="img/project-1/Scan-33.jpg" alt="project2 slide3"> <img class="slides" src="img/project-1/Scan-38.jpg" alt="project2 slide4"> <img class="slides" src="img/project-1/Scan-49.jpg" alt="project2 slide5"> </div> </div> 

Answer 2

我看到您有一个很好的答案，但我将其添加为替代方法。

我建议使用一个类作为父类的更通用选择器，然后再使用该类。 注意，我还在此处添加了选项，可以使用data-slide-index属性设置预定义的显示图像，然后将其设置为当前所选图像的值。 例如，如果将其保存到Cookie中，则也可以从中恢复。

如果需要，可以删除project1和project2类。

我还使用了data-direction以便可以从标记中删除单击处理程序，而不必关心单击哪个按钮。

• 没有事件的情况下，标记会更清晰一些，从而在不需要组名的情况下使其更通用
• 恢复上一次查看/第一个查看的视图（添加Cookie或从后端）
• 使用一个hidden类，并将其切换为显示/隐藏
• 在内部使用基于0的数字，因为基于数组的数组基于0 ，使编码的维护更简单，但为普通人的显示添加1 。
• 重要的是，不要使用全局变量

 (function setup() { // add event listener to buttons let els = document.getElementsByClassName("project-container"); for (let i = 0; i < els.length; i++) { let prevnext = els[i].getElementsByClassName("prevnext"); for (let p = 0; p < prevnext.length; p++) { prevnext[p].addEventListener("click", plusMinusDivs, false); } //hide/show for each group, avoid this call by adding classes to markup showImage(els[i]); } })(); function plusMinusDivs() { let parent = this.closest(".project-container"); let slider = this.closest(".imgslide"); let slideIndex = slider.dataset.slideIndex * 1; let nd = this.dataset.direction * 1;//*1 to avoid parse slideIndex = slideIndex += nd; let slides = parent.querySelectorAll(".slides"); if (slideIndex >= slides.length) { slideIndex = 0; } if (slideIndex < 0) { slideIndex = slides.length - 1; } slider.dataset.slideIndex = slideIndex + ""; showImage(parent); } function showImage(parent) { let slides = parent.querySelectorAll(".slides"); let len = slides.length; for (let s = 0; s < len; s++) { slides[s].classList.toggle("hidden", true); } let slider = parent.querySelector(".imgslide"); let slideIndex = slider.dataset.slideIndex * 1;//*1 to avoid parse slides[slideIndex].classList.toggle("hidden", false); let pageText = (slideIndex + 1) + ' / ' + len; parent.querySelector(".pagination").innerText = pageText; } 

 .hidden { display: none; } .prevnext { background-color: #AAEEDD; } 

 <div class="project-container project1"> <div class="pagination">&nbsp;</div> <div class="imgslide noselect" data-slide-index="0"> <button class="prevnext prev" data-direction="-1">&lt;&lt;</button> <button class="prevnext next" data-direction="1">&gt;&gt;</button> <img class="slides" src="img/project-1/Scan-4.jpg" alt="4" /> <img class="slides" src="img/project-1/Scan-24.jpg" alt="24" /> <img class="slides" src="img/project-1/Scan-35.jpg" alt="35" /> <img class="slides" src="img/project-1/Scan-39.jpg" alt="39" /> <img class="slides" src="img/project-1/Scan-40.jpg" alt="40" /> </div> </div> <div class="project-container project2"> <div class="pagination">&nbsp;</div> <div class="imgslide noselect" data-slide-index="3"> <button class="prevnext prev" data-direction="-1">&lt;&lt;</button> <button class="prevnext next" data-direction="1">&gt;&gt;</button> <img class="slides" src="img/project-1/Scan-41.jpg" alt="2-41" /> <img class="slides" src="img/project-1/Scan-22.jpg" alt="2-42" /> <img class="slides" src="img/project-1/Scan-33.jpg" alt="2-33" /> <img class="slides" src="img/project-1/Scan-38.jpg" alt="2-38" /> <img class="slides" src="img/project-1/Scan-49.jpg" alt="2-49" /> </div> </div>