第一次点击不会发生 Function

Question

我对 JS 很陌生，我的幻灯片有问题。 它工作正常，但不是从第一次点击开始。 我在 function 中编写了一个控制台日志，它在第一次单击时显示，但 if/else 语句在第二次单击时开始工作。 我不明白这个问题。

let index = 0;

function previousPage () {
    console.log ('previous');
    initialize();
    if (index === 0){
        index = spContainer.length;
        spContainer[index-1].style.display = 'flex';
        index--;
    } else {     
        spContainer[index-1].style.display = 'flex';
        index--;
    }
}

function nextPage () {
    console.log ('next');
    initialize();
    if (index === spContainer.length){
        index = 0;
        spContainer[index].style.display = 'flex';
        index++;
    } else {
        spContainer[index].style.display = 'flex';
        index++;
    }
}

function initialize () {
    spContainer.forEach (x => x.style.display = 'none');
}

Answer 1

你let index = 0; . 然后您选择undefined spContainer[index-1] 。

Answer 2

您可以通过仅使用一个通过参数前进或后退的 function 来简化事情。 这样逻辑就完成了一次，并且可以可靠地进行测试。 您可以确定新的索引值，然后设置其显示值一次。 移动到下一页调用movePage(true)和上一页调用movePage(false) 。

在设置 flex之后，您让代码工作index值的方式正在更改，并且错误的元素可能会保持选中状态。 下面的代码更直接，应该不会对测试/调试造成混淆。 关键是在将display样式设置为“flex”之前设置正确的index值。

 const spContainer = [{style: {}},{style: {}},{style: {}}]; let index = 0; function movePage(forward) { spContainer.forEach (x => x.style.display = 'none'); index += forward? 1: -1; // move index up or down by one if (index < 0) { // if negative, go back to end of list index = spContainer.length - 1; } else if (index >= spContainer.length) { // if past the end go back to zero index = 0; } spContainer[index].style.display = 'flex'; console.log (forward?'next':'previous',index); console.log(spContainer); } function nextPage() { movePage(true); } function previousPage() { movePage(false); } previousPage(); // previous will go to index 2 from index 0 nextPage(); // next will go back to start (index 0) nextPage(); // next again will go to index 1

Answer 3

首先，您在这里的比较是错误的 - if (index === spContainer.length) {} ，它应该是if (index === spContainer.length - 1) {}因为长度从 1 开始， index - 从 0 .

我也不太明白如何使用spContainer运行forEach 。 这应该是不可能的。

但我建议你以不同的方式重建整个逻辑。 像这样：

const slides = document.querySelectorAll(".slide"); // grab all your slides here
let index = 0;
const maxIndex = slides.length - 1;

function increaseIndex() {
  if (index === maxIndex) {
    index = 0;
  } else {
    index++;
  }
}

function decreaseIndex() {
  if (index === 0) {
    index = maxIndex;
  } else {
    index--;
  }
}

function hideAllSlides() {
  for (let i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }
}

function render() {
  slides[index].style.display = "flex";
}

function switchToPrev() {
  hideAllSlides();
  decreaseIndex();
  render();
}

function switchToNext() {
  hideAllSlides();
  increaseIndex();
  render();
}

希望有帮助！

Answer 4

问题是您在使用它之前没有更新index ：

spContainer[index].style.display = 'flex';
index++;

假设index = 0 。 因此，页面加载时会显示元素spContainer[0] 。

第一次单击时，您将元素spContainer[0]的display属性更改为flex ，它已经是flex ，因为index仍然是0 。 您看不到任何更改，因为您根本没有进行任何更改。

然后你用index++更新index为1

现在，通过第二次单击，您将元素spContainer[1]的display属性更改为flex ，因为前一次单击时index已更新为1 。

只需确保在使用它之前更新index ：

let index = 0;

function previousPage () {
    console.log ('previous');
    initialize();
    if (index === 0){
        index = spContainer.length - 1; 
    } else {
        index--;
    }
    spContainer[index-1].style.display = 'flex';
}

function nextPage () {
    console.log ('next');
    initialize();
    if (index === spContainer.length - 1) {
        index = 0;
    } else {
        index++;
    }
    spContainer[index].style.display = 'flex';
}

function initialize () {
    spContainer.forEach (x => x.style.display = 'none');
}