0

好吧，还有一个问题。自从我不久前开始学习 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 按钮......

你对我应该如何开始工作 PREVIOUS 和 NEXT 有什么建议吗？

我附上一个JSFiddle

非常感谢您的任何建议！

4

2 回答 2

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()

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

于 2012-11-07T20:28:27.717 回答
0

您可以在函数范围之外保存一个变量来记忆当前文章，当您将 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)
});
​

这是小提琴

于 2012-11-07T20:35:39.033 回答