Question

尝试在导航中创建“下一个”和“上一个”按钮。点击后，他们应该带我到下一个/上一个html文件（网页）。

代码如下所示：

const pages =
["home.html","about.html","skills.html","projects.html","contact.html"];

const currentUrl = window.location.href;
const i = pages.indexOf(currentUrl) 
const arrowUp = document.getElementById("up");
const arrowDown = document.getElementById("down");

function next(){
    i++;

    let goTo = pages[i];

    window.location = goTo;

    if(i===pages.length){
        i = 0;
    }
}

function prev(){
    i--;

    let goTo = pages[i];

    window.location = goTo;

    if(i=0){
        i = pages.length;
    }
}

arrowUp.addEventListener("click",next());

arrowDown.addEventListener("click",prev());

<div id="arrows">
  <a href="#" id="up">
    <i class="far fa-arrow-circle-up"></i>
  </a>
  <a href="#" id="down" class="mbot1">
    <i class="far fa-arrow-circle-down"></i>
  </a>
</div>

是否由于href =“＃”而链接问题？点击后，只需在当前网址上添加＃（就像没有js一样）。

Answer 1

您要用i声明const。那是不可重新分配的。使用var或let

var i = pages.indexOf(currentUrl)

Answer 2

代码存在一些问题。

首先，i是用const声明的，但是如果要稍后再设置，则需要用let或var声明。您还要检查i是否等于=等于0，这将对其进行设置，而不是比较运算符==或===。

初始i值的另一个问题是，如果在currentUrl中找不到pages，则可能将其设置为-1。除非您确定总是有pages.indexOf(currentUrl) >= 0，否则应添加默认值/后备值。

导航后还将检查开始和结束限制。问题是，如果您使用home.html（索引0），则递减，导航到索引-1，然后设置i = pages.length。您应该使用if / else语句来设置i，或者简短地突出一个三元运算符。

最后，pages.length将指针设置为现有索引之后的指针。在您的示例中，pages包含五个项目，但是由于数组索引从0开始，因此最后一个在pages[4]处。 pages[5]不存在。

请尝试以下代码：

function next(){
    i = i === pages.length - 1 // if index at end
        ? 0                    // go to start
        : i + 1;               // else go next
    let goTo = pages[i];
    window.location = goTo;
}

function prev(){

    i = i === 0            // if index is at start
        ? pages.length - 1 // go to end
        : i - 1;           // else go back one
    let goTo = pages[i];
    window.location = goTo;
}

尝试使“下一个”和“上一个”按钮在点击时导航导航

2 个答案: