Question

我是JS的新手，我的幻灯片有问题。可以，但是第一次点击就不能。我已经在该函数中编写了控制台日志，并且第一次单击时就显示了该日志，但是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;。然后，您选择spContainer[index-1]的{{1}}。

Answer 2

您可以通过仅使用一个通过参数前进或后退的功能来简化操作。这样，逻辑只需完成一次即可可靠地进行测试。您可以确定新的索引值，然后仅设置一次其显示值。要移至下一页，请致电movePage(true)，而对上一页，请致电movePage(false)。

设置后，更改了使代码使用index值的方式。设置了flex后，可能会选择错误的元素。下面的代码更加简单明了，并且应该减少测试/调试的混乱。关键是在将index样式设置为“ flex”之前，先设置正确的display值。

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开始，索引从0开始。

我也不太了解如何使用forEach运行spContainer。这不可能。

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

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

问题在于您在使用while之前不对其进行更新：

index

比方说spContainer[index].style.display = 'flex'; index++;。因此，页面加载时将显示元素index = 0。

第一次单击时，您将元素spContainer[0]的{{1}}属性更改为display，因为spContainer[0]仍为{{1} }。您看不到任何更改，因为您根本没有进行任何更改。

然后将flex的{{1}}更新为flex

现在，第二次单击将元素index的{{1}}属性更改为0，因为前一次单击将index更新为index++

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

display

第一次单击就不会发生功能

4 个答案: