0

現在、「ページ」番号をクリックするとテキストのブロックが変わるようにしていますが、前と次のボタンを追加したいと思います。

ここで私の現在のバージョンをチェックしてください: http://jsfiddle.net/ZBWqS/

私が考えたすべてのソリューションは、実行を開始すると、機能しないコードの混乱に変わります。

noob-JS の質問で申し訳ありません。

<div id="1" style="display: block;">
<p>This is the first block of text</p>
<p class="page">
1 of 3
</p>
</div>

<div id="2" style="display: none;">
<p class="red">This is the second block of text</p>
<p class="page">
2 of 3
</p>
</div>

<div id="3" style="display: none;">
<span>This is the third block of text</span>
<p class="page">
3 of 3
</p>
</div>

<div class="bottom">
<a href="#" onclick="show('1'), hide('2'), hide('3'); return false;">1 </a><a href="" onclick="show('2'), hide('1'), hide('3'); return false;">2 </a><a href="" onclick="show('3'), hide('2'), hide('1'); return false;">3 </a>
</div>
<script>
    function show(id) {
        document.getElementById(id).style.display = 'block';
    }
    function hide(id) {
        document.getElementById(id).style.display = 'none';
    }
</script>​
4

2 に答える 2

0

現在の場所を格納する変数を保持し、それをインクリメント/デクリメントしてから、その変数に基づいてコンテンツを表示します。

http://jsfiddle.net/ZBWqS/3/

// hold where we are right now. For previous and next to make sense,
// you have to know where you are.
var current = 1;

// function to go to previous
var prev = function() {
    current -= 1;
    if (current < 1) current = 1; // can't go too far previous
    showContent();
};

// function to go next
var next = function() {
    current += 1;
    if (current > 3) current = 3; // can't go too far next
    showContent();
};

// Update what content we are showing based on the "current" index
var showContent = function() {
    var display;
    for (var i = 1; i <= 3; i++) {
        if (i == current) {
            display = 'block';
        } else {
            display = 'none';
        }
        document.getElementById(i).style.display = display;
    }
};

// bind the prev and next function to the links 
document.getElementById('prev').onclick = prev;
document.getElementById('next').onclick = next;

// Setup the initial state of the content
showContent();
​
于 2012-11-14T01:58:56.103 に答える
0

私はあなたのコードのリファクタリング バージョンも作成しました。どちらが好きかはあなた次第です ;)

http://jsfiddle.net/haDAj/

HTML

<div id="1" class="pagecontainer" style="display: block;">
<p>This is the first block of text</p>
<p class="page">
1 of 3
</p>
</div>

<div id="2" class="pagecontainer" style="display: none;">
<p class="red">This is the second block of text</p>
<p class="page">
2 of 3
</p>
</div>

<div id="3" class="pagecontainer" style="display: none;">
<span>This is the third block of text</span>
<p class="page">
3 of 3
</p>
</div>

<div class="bottom">
    <a href="#" onclick="prev()">&lsaquo;</a>
    <a href="#" onclick="page('1')">1 </a>
    <a href="#" onclick="page('2')">2 </a>
    <a href="#" onclick="page('3')">3 </a>
    <a href="#" onclick="next()">&rsaquo;</a>
</div>​

脚本

var currentPage = 1;

function page(pg)
{
    var els = document.getElementsByClassName("pagecontainer");
    for (var i = 0; i < els.length; i++)
    {
        var page_of_container = els[i].getAttribute("id");
        els[i].style.display = page_of_container  == pg ? 'block' : 'none';                    
    }

    currentPage = pg;
}

function prev()
{
    if (currentPage <= 1) return;

    page(currentPage -1);
}

function next()
{
    if (currentPage >= document.getElementsByClassName("pagecontainer").length) return;

    page(currentPage + 1);
}​
于 2012-11-14T02:03:08.650 に答える