jquery下一個按鈕不能正常工作

我正在製作一個測驗網頁應用程序的樂趣。它只用JavaScript，html和css編寫，所以沒有服務器端。不要告訴我，我的用戶可以作弊。我知道。我想要下一個按鈕來工作。現在，下一個和上一個都執行下一個操作，但它不起作用。它可以嘗試在http://jsfiddle.net/nimsson/5fW2Z/1/。再次，我不在乎在這一點上作弊。jquery下一個按鈕不能正常工作

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

來源

2014-04-19 nimsson

我沒有足夠的時間通過所有的代碼看，但你的jQuery是一個小響亮。你爲什麼不把一個類放在你想要定位的元素上，而用它們來代替.parent（）。parent（）。parent（）。parent（） - 調試更具體的你會更容易是。 – VtoCorleone

@VtoCorleone我會有更多的那個班，我想要個人。我想我可以使用ID。 – nimsson

你在你的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

來源

2014-04-19 00:52:14 Barmar

jquery下一個按鈕不能正常工作

回答

相關問題