禁用特定幻灯片上的按钮

Posted 2023-03-21

【中文标题】禁用特定幻灯片上的按钮

【英文标题】：Disable button on specific slide

【发布时间】：2021-08-10 23:10:01

【问题描述】：

我已经把它做成了一个有 2 张图片的滑块，第一个是 Gotrade，第二个是 Midas。我希望当我在第一张幻灯片上时不显示左箭头，而当我在第二张幻灯片上时不显示右箭头。

 if (firstSlide.classList.contains('active-slide')) 
 buttonLeft.style.display = 'none';
 buttonRight.style.display = 'flex';
 else if (secondSlide.classList.contains('second-slide')) 
 buttonLeft.style.display = 'flex';
 buttonRight.style.display = 'none';

我试过了，但没有用。 这是图片供参考https://i.stack.imgur.com/lTXdt.pnghttps://i.stack.imgur.com/82clB.png

Codepen：https://codepen.io/andrei-nistor/pen/ZEeeGEG

【问题讨论】：

这需要更多调试细节 - buttonLeft 和 buttonRight 是什么？您是否确认他们指向正确的元素？ firstSlide 和 secondSlide 也一样 - 你确认课程是正确的吗？此代码何时运行 - 您是否验证它在幻灯片转换后运行？您可能可以使用console.log 在代码运行时检查它，而不是询问 ***

如果我真的找到了解决方案，我没有在 *** 上发布。您有一些图片可供参考，您可以在其中看到 buttonLeft 和 buttonRight 箭头方向如何

你能提供你的html吗？

@AndreiNistor Images 不会告诉我们任何有关标记或代码何时运行的信息。这里没有足够的信息来回答您的问题。请阅读how to create a minimal reproducible example。

安迪雷你知道我不能复制很多html代码

【参考方案1】：

您的代码有几个问题。例如，您正在检查一个名为 active-slide 的类名，但您的代码中没有任何内容设置具有该名称的类。如果您从其他来源复制和粘贴代码而没有花一些时间来理解它，则可能无法调试。

您可以检查您所在的幻灯片编号，而不是检查是否存在不存在的类，并检查您是在第一张还是最后一张幻灯片上。您还需要在幻灯片转换后运行此代码，而不是像 Codepen 中显示的那样在程序结束时运行一次。这是一个工作 javascript 检查slideIndex 而不是类的示例：

var slideIndex = 1;

let firstSlide = document.querySelector('.first-slide');
let secondSlide = document.querySelector('.second-slide');
let buttonLeft = document.querySelector('.prev');
let buttonRight = document.querySelector('.next');

showSlides(slideIndex);

// Next/previous controls
function plusSlides(n) 
    showSlides(slideIndex += n);


// Thumbnail image controls
function currentSlide(n) 
    showSlides(slideIndex = n);


function showSlides(n) 
    var i;
    var slides = document.getElementsByClassName("mySlides");
    if (n > slides.length)  slideIndex = 1 
    if (n < 1)  slideIndex = slides.length 
    for (i = 0; i < slides.length; i++) 
        slides[i].style.display = "none";
    
    slides[slideIndex - 1].style.display = "flex";

    if (slideIndex === 1) 
        buttonLeft.style.display = 'none';
        buttonRight.style.display = 'flex';
     else if (slideIndex === slides.length) 
        buttonRight.style.display = 'none';
        buttonLeft.style.display = 'flex';
    

【讨论】：

我用 'active-slide' 类对其进行了测试

如果您遇到问题的代码与您在问题中发布的代码不同，则很难回答问题。您可以通过可重复的步骤提出更具体的问题，您将获得更好、更快的答案。