0

さて、もう1つ質問があります。少し前に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)、それが前回の記事の呼び出しになると考えたので、2つのボタンを解決しました（新しいコンテンツを生成する前に消去しinnerHTMLますが、方法がわからないのは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 に答える