如何使用 Javascript 定位特定的 div

Question

很抱歉我以这种方式打扰......我想我有一个非常简单的问题，但我无法解决它......

（我正在使用香草 Javascript）

我在一个页面中有多个图像轮播，我无法让它们工作。

我设法让一个旋转木马工作，但如果我插入第二个，它就不起作用。

我尝试为代表轮播id="voucher1"的每个 div 提供 id，并将它们定位在 javascript 中

carouselA = carousel('#voucher1')
function carousel(id){
   const carouselSlide = document.querySelector(id + '.carousel-slide');
}

但它不起作用......

这是我的 HTML

        <div class="vouchers">
            <span class="voucherstitle">Gutscheine</span>
            <div class="voucher" id="voucher1">
                <div class="carousel-container">
                    <button id="prevBtn">←</button>
                    <button id="nextBtn">→</button>
                    <div class="carousel-slide">
                        <img src="images/vouchers/firstvoucher/voucher3.jpg" id="lastclone" alt="">
                        <img src="images/vouchers/firstvoucher/voucher1.jpeg">
                        <img src="images/vouchers/firstvoucher/voucher2.jpg">
                        <img src="images/vouchers/firstvoucher/voucher3.jpg">
                        <img src="images/vouchers/firstvoucher/voucher1.jpeg" id="firstclone" alt="">
                    </div>
                </div>
            </div>
            <div class="voucher" id="voucher2">
                <div class="carousel-container">
                    <button id="prevBtn">←</button>
                    <button id="nextBtn">→</button>
                    <div class="carousel-slide">
                        <img src="images/vouchers/firstvoucher/voucher3.jpg" id="lastclone" alt="">
                        <img src="images/vouchers/firstvoucher/voucher1.jpeg">
                        <img src="images/vouchers/firstvoucher/voucher2.jpg">
                        <img src="images/vouchers/firstvoucher/voucher3.jpg">
                        <img src="images/vouchers/firstvoucher/voucher1.jpeg" id="firstclone" alt="">
                    </div>
                </div>
            </div>
        </div>

这是我的 JavaScript

carousel('#voucher1');
carousel('#voucher2');

function carousel(id){
    const carouselSlide = document.querySelector(id + '.carousel-slide');
    const carouselImages = document.querySelectorAll(id + '.carousel-slide img')
    
    const prevBtn = document.querySelector(id + '#prevBtn');
    const nextBtn = document.querySelector(id + '#nextBtn');
    
    let counter = 1;
    let size = carouselImages[0].clientWidth;
    carouselSlide.style.transform = 'translateX(' + (-size * counter) + 'px)'
    
    nextBtn.addEventListener('click', () =>{
        let size = carouselImages[0].clientWidth;
        if(counter<0) return;
        carouselSlide.style.transition = "transform 0.4s ease-in-out";
        counter++;
        carouselSlide.style.transform = 'translateX(' + (-size * counter) + 'px)';
    
        nextBtn.disabled=true;
        setTimeout(function(){
            nextBtn.disabled=false;
        },400)
    });
    
    prevBtn.addEventListener('click', () =>{
        let size = carouselImages[0].clientWidth;
        carouselSlide.style.transition = "transform 0.4s ease-in-out";
        counter--;
        carouselSlide.style.transform = 'translateX(' + (-size * counter) + 'px)';
    
        prevBtn.disabled=true;
        setTimeout(function(){
            prevBtn.disabled=false;
        },400)
    });
    
    carouselSlide.addEventListener('transitionend', () =>{
        let size = carouselImages[0].clientWidth;
        if(carouselImages[counter].id === 'lastclone'){
            carouselSlide.style.transition = "none";
            counter = carouselImages.length-2;
            carouselSlide.style.transform = 'translateX(' + (-size * counter) + 'px)';
        }
        if(carouselImages[counter].id === 'firstclone'){
            carouselSlide.style.transition = "none";
            counter = carouselImages.length - counter;
            carouselSlide.style.transform = 'translateX(' + (-size * counter) + 'px)';
        }
    });
    
    window.addEventListener('resize', function(event) {
        let size = carouselImages[0].clientWidth;
        carouselSlide.style.transition = "none";
        carouselSlide.style.transform = 'translateX(' + (-size * counter) + 'px)';
    }, true);
}

再次抱歉...也许这是一个要解决的简单问题，但我无法找到解决方案...提前致谢！

Answer 1

这里有一些问题：

// XXX 
// Unused, undeclared identifier:
carouselA = carousel('#voucher1')


function carousel(id){
// XXX 
// ID selector begins with octothorpe, #.
// XXX
// No element exists with id="voucher1" and class="carousel-slide". 
// You need a space between the two to select the descendant.
document.querySelector(id + '.carousel-slide');
}

反而：

document.querySelector(id + ' .carousel-slide');

命名变量它们是什么。 对于任何名为id的 function 参数，只传递元素 id 并更改被调用者以反映这一点。 否则，如果您想传入前缀 octothorpe，请重命名参数idSelector 。

Answer 2

在您的 javascript 文件中，您在初始化之前调用了 function。 你应该总是在调用它之前初始化一个 function 否则你会得到一个错误。 尝试交换它们，看看是否有效：

//Initialise the function
function carousel(id){
(Your function here)
}

//Then call the function
carousel('#voucher1');
carousel('#voucher2');