Question

那么，还有一个问题。自从我不久前开始学习javascript以来，我几乎痴迷于尝试新事物！在这里：

假设我有一个字符串数组，我想用导航菜单迭代它，按钮为FIRST，PREVIOUS，NEXT，LAST。

看看这段代码：

var thearray = ["article1", "article2", "article3"];

var thebody = document.getElementsByTagName('body')[0];
var divcontainer = document.createElement("div");
var divpage = document.createElement("div");

function generatepage(article) {
    var paragraph = document.createElement("p");
    var name = document.createTextNode(thearray[article]);
    paragraph.appendChild(name);
    divpage.appendChild(paragraph);
}

divcontainer.appendChild(divpage);
thebody.appendChild(divcontainer);


generatepage(0); // that would be for the first article

我还发现generatepage(thearray.length -1)将是上一篇文章的调用，所以我解决了两个按钮（在生成新内容之前我会用innerHTML删除它但是我怎么也想不到要做的是PREVIOUS和NEXT按钮......

您对我应该如何开始上一次和下一次工作有什么建议吗？

我附上JSFiddle

非常感谢您的任何建议！

Answer 1

您可以将活动页面保存在函数外的变量中：

var page = 0;

然后您无需将任何页面带入generatepage()：

function generatepage() {
    var paragraph = document.createElement("p");
    var name = document.createTextNode(thearray[page]);
    paragraph.appendChild(name);
    divpage.appendChild(paragraph);
}

现在您可以从函数外部控制页面：

var next = function() {
    if ( page < page.length-1 ) { page++; }
}

var prev = function() {
    if ( page ) { page--; }
}

所以要显示第一页：

page = 0;
generatepage()

接下来：

next();
generatepage()

等......当然还有其他方法，但这可能会给你一个想法。

Answer 2

您可以将变量保存在函数范围之外，以记忆当前文章当您将Eventlisteners添加到按钮时，您可以调用下一个和上一个项目

但你应该以某种方式用下一个替换div的内容而不是附加它（我不知道操纵dom元素的事情）

你可以尝试这样的事情：

var thearray = ["article1", "article2", "article3"];

var thebody = document.getElementsByTagName('body')[0];
var divcontainer = document.createElement("div");
var divpage = document.createElement("div");
var currentarticle
function generatepage(article) {
    if(thearray[article]) {
    currentarticle = article
    var paragraph = document.createElement("p");
    var name = document.createTextNode(thearray[article]);
    paragraph.appendChild(name);
    divpage.innerHTML= paragraph.innerHTML
}else {
    return false
    }
}

divcontainer.appendChild(divpage);
thebody.appendChild(divcontainer);


generatepage(0); // that would be for the first article




document.getElementById("next").addEventListener("click",function() {
    generatepage(currentarticle + 1)
        });
            document.getElementById("previous").addEventListener("click",function() {
    generatepage(currentarticle - 1)
});
document.getElementById("last").addEventListener("click",function() {
    generatepage(thearray.length - 1)
});

document.getElementById("first").addEventListener("click",function() {
    generatepage(0)
});

继承人Fiddle

如何使用导航菜单按钮迭代数组（第一个，上一个，下一个，最后一个）

2 个答案: