在數組中添加遞增類名 - JavaScript

Question

我想自動執行此操作（exp 我想要一個包含 modal-bg1 到 modal-bg9 的數組......），有沒有辦法做到這一點？ ：

var modalBtn = [document.querySelectorAll(".activeModal1"), document.querySelectorAll(".activeModal2")];
var modalBg = [document.querySelector(".modal-bg1"), document.querySelector(".modal-bg2")];
const prevBtn = [document.querySelector("#prevBtn1"), document.querySelector("#prevBtn2")];
const nextBtn = [document.querySelector("#nextBtn1"), document.querySelector("#nextBtn2")];
const carouselSlide = [document.querySelector(".carousel-slide1"), document.querySelector(".carousel-slide2")];
const carouselImages = [document.querySelectorAll(".imgSlide1"),document.querySelectorAll(".imgSlide2")];

Answer 1

處理多個模態的更好方法是讓每個按鈕知道如何查詢自己的模態，即data-controls 。 然后，您可以提供一個索引，例如data-index以獲得正確的模式。

您獲取按鈕和幻燈片的所有查詢都應與當前模式相關。

 const handleClick = e => { const btn = e.target, index = parseInt(btn.dataset.index, 10), modal = document.querySelectorAll(btn.dataset.controls)[index]; document.querySelectorAll('.modal').forEach(currModal => currModal.classList.toggle('active', currModal === modal)); // Relative queries const carouselSlide = modal.querySelector('.carousel-slide'), carouselImages = modal.querySelector('.carousel-images'), prevBtn = modal.querySelector('.prev-btn'), nextBtn = modal.querySelector('.next-btn'); }; document.querySelectorAll('.modal-btn').forEach(btn => btn.addEventListener('click', handleClick));

 body { display: flex; flex-direction: column; }.modal { display: none; width: 10em; height: 6em; border: thin solid grey; padding: 0.25em; }.modal-background { display: flex; flex-direction: column; flex: 1; }.carousel-slide { display: flex; flex: 1; background: grey; }.carousel-images { display: flex; flex: 1; justify-content: center; font-size: 3em; color: lightgrey; }.modal-buttons { display: flex; justify-content: space-between; margin-top: 0.25em; }.modal.active { display: flex; }

 <div> <button class="modal-btn" data-controls=".modal" data-index="0">Show 1</button> <button class="modal-btn" data-controls=".modal" data-index="1">Show 2</button> <button class="modal-btn" data-controls=".modal" data-index="2">Show 3</button> </div> <hr /> <div class="modal"> <div class="modal-background"> <div class="carousel-slide"> <div class="carousel-images">#1</div> </div> <div class="modal-buttons"> <button class="prev-btn">Prev</button> <button class="next-btn">Next</button> </div> </div> </div> <div class="modal"> <div class="modal-background"> <div class="carousel-slide"> <div class="carousel-images">#2</div> </div> <div class="modal-buttons"> <button class="prev-btn">Prev</button> <button class="next-btn">Next</button> </div> </div> </div> <div class="modal"> <div class="modal-background"> <div class="carousel-slide"> <div class="carousel-images">#3</div> </div> <div class="modal-buttons"> <button class="prev-btn">Prev</button> <button class="next-btn">Next</button> </div> </div> </div>

Answer 2

這個 function 將采用選擇器和數量並生成一個數組：

function createArray(selector, count) {
    var current = 0;
    var arr = []
    while (++current < count) {
        arr.push(document.querySelector(selector.replace(/\{#\}/g, current)));
    }
    return arr;
}

在選擇器中{#}將替換為數字：

var modalBtn = createArray(".activeModal{#}");

---

編輯：如果您想讓所有元素都帶有 class .activeModal后跟任意數字，您可以簡單地使用以選擇器開頭的屬性：

var modalBtn = document.querySelectorAll('[class^="activeModal"]');

這將返回所有元素的列表。