Question

我正在制作一个测验网络应用程序以获得乐趣。它只用JavaScript，html和css编写，所以没有服务器端。不要告诉我，我的用户可以作弊。我知道。我想下一个按钮工作。现在，下一个和前一个都做下一个动作，但它不会起作用。它可以在http://jsfiddle.net/nimsson/5fW2Z/1/进行试用。再一次，我不关心在这一点上作弊。

HTML：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Quiz Test</title>
<link rel="stylesheet" type="text/css" href="quiz.css" />
</head>

<body>
    <ul class="quiz">
        <li>
            <div class="quizitem">
                <div class="question">What is 2+2?</div>
                <br />
                <ul class="answers">
                   <li class="wrong answer">a. 5</li>
                   <li class="wrong answer">b. 2</li>
                   <li class="correct answer">c. 4</li>
                </ul>
                <br />
                <br />
                <div class="nav"><span>Previous</span><span>Next</span></div>
            </div> 
        </li>
        <li>
            <div class="quizitem">
                <div class="question">What is 2+2?</div>
                <br />
                <ul class="answers">
                   <li class="wrong answer">a. 5</li>
                   <li class="wrong answer">b. 2           </li>
                   <li class="correct answer">c. 4</li>
                </ul>
                <br />
                <br />
                <div class="nav"><span>Previous</span><span>Next</span></div>
            </div> 
        </li>
    </ul>

    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script src="quiz.js"></script>
</body>
</html>

quiz.js：

// JavaScript Document
var questionI = 1;

$("ul.quiz div.quizitem ul.answers li.answer").click(function(e) {
    $(this).parent().children().removeClass("selected");
    $(this).addClass("selected");
});
$("ul.quiz div.quizitem div.nav span").click(function(e) {
    var ind = $(this).parent().parent().parent().index();
    $(this).parent().parent().parent().parent().hide();
    $(this).parent().parent().parent().parent().next().show();
});

$("ul.quiz div.quizitem").hide();
$("ul.quiz div.quizitem").eq(0).show();

quiz.css：

@charset "utf-8";
/* CSS Document */

ul.quiz {
    list-style:none;
    position:relative;
    left:-20px;
}

div.quizitem {
    padding:10px;
    border:1px solid black;
}
div.quizitem:after {
    content: '';
    display: table; 
    clear: both;
}
div.quizitem ul.answers {
    list-style:none;
    position:relative;
    left:-10px;
}
div.quizitem ul.answers > li.answer {
    cursor: pointer;
    background-color: #0F6;
    -webkit-transition: all .25s ease;
    -moz-transition: all .25s ease;
    -ms-transition: all .25s ease;
    -o-transition: all .25s ease;
    transition: all .25s ease;
    }
ul.quiz div.quizitem ul.answers > li.answer.selected {
    background-color: #0CF;
}
ul.quiz div.quizitem ul.answers > li.answer:hover {
    background-color: #0F9;
}
ul.quiz div.quizitem ul.answers > li.answer.selected:hover {
    background-color: #0DF;
}
ul.quiz div.quizitem div.nav > span {
    width:100px;
    height:20px;
    cursor: pointer;
    text-align: center;
    background-color: #0CF;
    -webkit-transition: all .25s ease;
    -moz-transition: all .25s ease;
    -ms-transition: all .25s ease;
    -o-transition: all .25s ease;
    transition: all .25s ease;
    text-align:center;
}
ul.quiz div.quizitem div.nav > span:nth-child(1) {
    float:left;
}

ul.quiz div.quizitem div.nav > span:nth-child(2) {
    float:right;
}
ul.quiz div.quizitem div.nav > span:hover {
    background-color: #0DF;
}

Answer 1

隐藏和显示时，parent()步骤中的某个级别会上升太多。此外，您隐藏并显示错误的元素 - 当测验开始时，您隐藏div.quizitem，但是当您隐藏和显示时，您的目标是li。使用closest()找到你关心的祖先更简单，因为它有一个你可以搜索的类。

$("ul.quiz div.quizitem div.nav span").click(function (e) {
    var ind = $(this).parent().parent().parent().index();
    $(this).closest('div.quizitem').hide()
        .parent().next().find('div.quizitem').show();
});

DEMO

jquery下一个按钮不起作用

1 个答案: