上一個和下一個按鈕可循環瀏覽div內容，僅使用javascript，而不使用jquery

Question

我希望我的上一個和下一個按鈕隱藏當前卡片，如果單擊了下一個，則顯示下一張，並隱藏當前卡片，並在單擊上一張時顯示上一張。 明顯的東西。 我看過很多類似的問題，但答案都在jquery中，到目前為止，我對此一無所知。 我只想使用javascript css和html來做到這一點。

HTML：

<div class="cardContainer">
    <div class="questionCard active" id="q1">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin at varius sem. Morbi congue sit amet elit eu suscipit. Aliquam tristique leo at lacinia dapibus. Aliquam faucibus sapien sit amet odio aliquam, sed vestibulum eros porttitor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed dictum lobortis diam, ac pellentesque arcu sagittis eu. Mauris sit amet diam cursus, aliquam justo sed, ornare tellus. In id nibh lacinia, viverra felis ut, venenatis sem. Donec vel tortor dignissim, convallis arcu nec, bibendum urna. 
    </div>
    <div class="questionCard" id="q2">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin at varius sem. Morbi congue sit amet elit eu suscipit. Aliquam tristique leo at lacinia dapibus. Aliquam faucibus sapien sit amet odio aliquam, sed vestibulum eros porttitor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed dictum lobortis diam, ac pellentesque arcu sagittis eu. Mauris sit amet diam cursus, aliquam justo sed, ornare tellus. In id nibh lacinia, viverra felis ut, venenatis sem. Donec vel tortor dignissim, convallis arcu nec, bibendum urna. 
    </div>
    <div class="questionCard" id="q3">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin at varius sem. Morbi congue sit amet elit eu suscipit. Aliquam tristique leo at lacinia dapibus. Aliquam faucibus sapien sit amet odio aliquam, sed vestibulum eros porttitor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed dictum lobortis diam, ac pellentesque arcu sagittis eu. Mauris sit amet diam cursus, aliquam justo sed, ornare tellus. In id nibh lacinia, viverra felis ut, venenatis sem. Donec vel tortor dignissim, convallis arcu nec, bibendum urna. 
    </div>
    <div class="navCard">
        <a href="#" id="prev" onclick="previous()"><img src="img/back.png" value="prev"></a>
        <a href="#" id="nxt" onclick="next()"><img src="img/forward.png" value="nxt"></a>
        <a href="#" ><img src="img/Facebook.png" value="fb"></a>
        <a href="#" ><img src="img/Twitter.png" value="tweet"></a>
        <a href="#" ><img src="img/WhatsApp.png" value="whatsapp"></a>
    </div>
</div><!--end of card container-->

CSS：

.cardContainer {
    position: relative;
    top: 400px;
    background-color: #333;
    height: 100%;
    box-shadow: -1px -1px 7px black;
}
.active {
    display: block;
}


.questionCard {
    min-width: 50%;
    max-width: 60%;
    margin: 0 auto;
    margin-top: 20px;
    top: -300px;
    padding: 20px;
    background-color: #1b6bb9;
    color: white;
    border-radius: 2px;
    position: inherit;
    border-color: #1167bc;
    box-shadow: 1px 1px 7px black;
    border: rgba(128, 128, 128, 0.35);
    z-index: 1;
    display: none;
}
.navCard {
    max-width: 400px;
    min-width: 60px;
    margin: 0 auto;
    border-color: #1b6bb9;
    z-index: 1;
    padding: 20px;
    background-color: white;
    border-radius: 2px;
    box-shadow: 1px 1px 7px;
    border: rgba(128, 128, 128, 0.35);
    position: inherit;
    top: -270px;
    background-color: #1b6bb9;
    align-content: center;
}

JS：

var qlist = document.getElementsByClassName("questionCard");
var i=1;
function previous () {
    qlist[i].style.display = 'none';
    qlist[i-1].style.display = 'block';
    i--
}

function  next () {
    qlist[i].style.display = 'block';
    qlist[i-1].style.display = 'none';
    i++
}

Answer 1

好的，現在我了解到您在處理錯誤時遇到了麻煩，請讓我們繼續進行。 為了處理最終沒有出錯的事情，您只需要注意這些情況即可。 這是一個非常簡單的例子。

小提琴： https : //jsfiddle.net/6karx4v0/1/

HTML ：（我將id更改為從零開始，因為從零開始，它使事情變得更容易）

<div class="cardContainer">
    <div class="questionCard active" id="q0">
        q0
    </div>
    <div class="questionCard" id="q1">
        q1
    </div>
    <div class="questionCard" id="q2">
        q2
    </div>
    <div class="questionCard" id="q3">
        q3
    </div>
    <div class="navCard">
        <a href="#" id="prev" onclick="previous()">prev</a>
        <a href="#" id="nxt" onclick="next()">next</a>
    </div>
</div>

JS：

// Find all question cards
var qlist = document.getElementsByClassName("questionCard");
// Track current index
var i = 0;
// Track length of questions
var length = list.length;

function previous () {
    // If i is 0 we are back at start so don't do anything
    if (i == 0) {
        alert('done');
        return;
    }
    // Since we add at end of next we subtract at start of pre
    i--
    // Hide current
    qlist[i].style.display = 'none';
    // If i is 0 don't display previous since it doesn't exist
    if (i != 0) {
        qlist[i - 1].style.display = 'block';
    }
}

function  next () {
    // If i is length we are at end so don't do anything
    if (i == length) {
        alert('done');
        return;
    }
    // Show current
    qlist[i].style.display = 'block';
    // if i is 0 don't try to hide previous since it doesn't exist
    if (i != 0) {
        qlist[i-1].style.display = 'none';
    }
    // Add one to i
    i++
}

讓我知道評論是否有意義或可以隨時提出更多意見。