在数组中添加递增类名 - 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"]');

这将返回所有元素的列表。