如何使功能可重用？

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>