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更改为从0开始，因为它们在零基础上变得更容易）

<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++
}

如果评论有意义或随意提出更多信息，请与我联系。

上一个和下一个按钮循环通过div内容只使用javascript而不是jquery

1 个答案: