第一次单击元素不起作用，第二次单击起作用答案

【问题标题】：First click of element doesn't work, second click does第一次单击元素不起作用，第二次单击起作用
【发布时间】：2021-01-09 07:04:35
【问题描述】：

https://alexkchapman.com/Vans.html

在我网站上的三个图像中的任何一个（以及移动设备上的导航按钮）上，第一次点击都不起作用，但后续点击可以。控制台正在记录单击已注册，但图像未更改。

下面是相关的js：

var slideIndex = [1, 1, 1];
/* Class the members of each slideshow group with different CSS classes */
var slideId = ["slides1", "slides2", "slides3"];
showSlides(1, 0);
showSlides(1, 1);
showSlides(1, 2);

function plusSlides(n, no) {
  showSlides(slideIndex[no] += n, no);
  console.log(n);
}

function showSlides(n, no) {
  var i;
  var x = document.getElementsByClassName(slideId[no]);
  if (n > x.length) {
    slideIndex[no] = 1
  }
  if (n < 1) {
    slideIndex[no] = x.length
  }
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
  x[slideIndex[no] - 1].style.display = "block";
}

【问题讨论】：

请在此处发布minimal reproducible example，而不是在外部站点（当您得到问题的答案时可能会修复，因此对未来的读者毫无用处）。
它还有助于详细说明重现问题的确切步骤
我不知道这是否相关，但您需要将初始调用放在showSlides() 中的window.onload 函数中。您在幻灯片加载到 DOM 之前调用它们，因此尝试设置 x[0] 的样式时会出错。
我不明白n 是如何被使用的。在plusSlides() 中，它是增加幻灯片索引的数量。但是在showSlides() 中，您将它与类中的元素数量进行比较。为什么要将增量与总数进行比较？
你可能只想要if (slideIndex[no] > x.length) { slideIndex[no] = 1; }

标签： javascript html css console

【解决方案1】：

所以你的代码还不错，但你应该通过 js 类选择器选择幻灯片，最终代码将如下所示：（我建议使用此代码而不是您的代码，因为您的代码很复杂）

// var slideIndex = [1, 1, 1];
// /* Class the members of each slideshow group with different CSS classes */
// var slideId = ["slides1", "slides2", "slides3"];
// showSlides(1, 0);
// showSlides(1, 1);
// showSlides(1, 2);
var slides = document.getElementsByClassName('slides');
var slideIndex = 0;

function plusSlides() {
  slideIndex++;
  showSlides(slideIndex);
}

function showSlides(Index) {
    if (Index >= slides.length) {
        slideIndex = 1;
    }
    if (Index < 0) {
        slideIndex = slides.length;
    }
    for (i = 0; i < slides.length; i++) {
        slides[i].style.display = "none";
    }
    slides[slideIndex].style.display = "block";
}

<div class="slideshow">
            <div class="slides fade"><img src="img/header.jpg" width="100%"></div>
            <div class="slides fade"><img src="img/header1.jpg" width="100%"></div>
            <div class="slides fade"><img src="img/header2.jpg" width="100%"></div>
            <div class="slides fade"><img src="img/header3.jpg"     width="100%"></div>
</div>

您的代码中的问题在 cmets 中进行了解释：

// Select slides via class!!!!!!!!!!!!

// var slideIndex = [1, 1, 1];
// /* Class the members of each slideshow group with different CSS classes */
// var slideId = ["slides1", "slides2", "slides3"];
// showSlides(1, 0);
// showSlides(1, 1);
// showSlides(1, 2);


// You only need to increment slideIndex and run showSlides again
function plusSlides(n, no) {
  showSlides(slideIndex[no] += n, no);
  console.log(n);
}

// here you only have to hide every slide and show the one with the index of slideIndex
function showSlides(n, no) {
  var i;
  var x = document.getElementsByClassName(slideId[no]); // big mistake
//   every thing below is fine
  if (n > x.length) {
    slideIndex[no] = 1
  }
  if (n < 1) {
    slideIndex[no] = x.length
  }
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
//   execpt this line
  x[slideIndex[no] - 1].style.display = "block";
// should be like this
//   x[slideIndex].style.display = "block";
}

【讨论】：