如何做點擊功能的jquery循環

Question

是否有一個簡單的方法使用點擊按鈕功能進行測驗（多選題+圖片的幾個問題）？

我想這樣做，但它只移動到下一個（第二個）問題，然後停止。

$(document).ready(function() { 
    $("#button").click(function(){ 
     $("#question_form.show").toggleClass("show"); 
     $("#question_form").next().addClass("show"); 
    }); 
}); 

---

<form id="question_form" class="show"> 
    <img src="image1.png" id="current_image" alt=""> 
    <h3 id="question"> Question 1: </h3> 
    <hr> 
    <input type="radio" name="q1" value="q1-a">Answer 1 
    <br> 
    <input type="radio" name="q1" value="q1-b">Answer 2 
    <br> 
    <input type="radio" name="q1" value="q1-c">Answer 3 
    <br> 
    <br> 
    <input name="button" type="button" id="button" value="Next"> 
</form> 
<form id="question_form" class=""> 
    <img src="image2.png" id="current_image" alt=""> 
    <h3 id="question"> Question 2: </h3> 
    <hr> 
    <input type="radio" name="q2" value="q2-a">Answer 1 
    <br> 
    <input type="radio" name="q2" value="q2-b">Answer 2 
    <br> 
    <input type="radio" name="q2" value="q2-c">Answer 3 
    <br> 
    <br> 
    <input name="button" type="button" id="button" value="Next"> 
</form> 
<form id="question_form" class=""> 
    <img src="image.png" id="current_image" alt=""> 
    <h3 id="question"> Question 3: </h3> 
    <hr> 
    <input type="radio" name="q3" value="q3-a">Answer 1 
    <br> 
    <input type="radio" name="q3" value="q3-b">Answer 2 
    <br> 
    <input type="radio" name="q3" value="q3-c">Answer 3 
    <br> 
    <br> 
    <input name="button" type="button" id="button" value="Next"> 
</form> 

---

.show { 
    display: inline; 
} 
.hide { 
    display: none; 
} 

Answer 1

把@ j08291的評論到答案。

您只能擁有一個帶ID的元素。將它們更改爲類，並且需要執行一些樹遍歷以獲取對正確表單元素的引用來顯示和隱藏http://jsfiddle.net/pcUBr/

此外，您的CSS類名稱（show,hide）不是很有意義。請嘗試以下

CSS

.question_form { 
    display: none; 
} 
.question_form.current { 
    display: inline;  
} 

JS

$(".button").click(function(e){ 
    var form = $(e.target).closest('form'); 
    form.toggleClass("current"); 
    form.next().toggleClass("current"); 
}); 

HTML

<form class="question_form current" > 
    <img src="image1.png" class="current_image" alt=""> 
    <h3 class="question"> Question 1: </h3> 
    <hr> 
    <input type="radio" name="q1" value="q1-a">Answer 1 
    <br> 
    <input type="radio" name="q1" value="q1-b">Answer 2 
    <br> 
    <input type="radio" name="q1" value="q1-c">Answer 3 
    <br> 
    <br> 
    <input name="button" type="button" class="button" value="Next"> 
</form> 

Answer 2

的問題是，您使用的是相同的ID爲組件，形式的，在IMG的和按鈕的。 這些ID必須是唯一的（如@ j08691悲傷）

嘗試將屬性修改爲「class」，然後在您的腳本中從「＃」修改爲「。」，就像這樣。

$(document).ready(function() { 
    $(".button").click(function(event){ 
     var form = $(event.target).closest('form'); // or you can use $(event.target).parent(); for your HTML 
     $(".question_form.show").toggleClass("show hide"); 
     form.next().toogleClass("show hide"); 
    }); 
}); 

你的HTML代碼必須是這樣的：

<form class="question_form show"> 
    <img src="image1.png" class="current_image" alt=""> 
    <h3 class="question"> Question 1: </h3> 
    <hr> 
    <input type="radio" name="q1" value="q1-a">Answer 1 
    <br> 
    <input type="radio" name="q1" value="q1-b">Answer 2 
    <br> 
    <input type="radio" name="q1" value="q1-c">Answer 3 
    <br> 
    <br> 
    <input name="button" type="button" class="button" value="Next"> 
</form> 
<form class="question_form hide"> 
    <img src="image2.png" class="current_image" alt=""> 
    <h3 class="question"> Question 2: </h3> 
    <hr> 
    <input type="radio" name="q2" value="q2-a">Answer 1 
    <br> 
    <input type="radio" name="q2" value="q2-b">Answer 2 
    <br> 
    <input type="radio" name="q2" value="q2-c">Answer 3 
    <br> 
    <br> 
    <input name="button" type="button" class="button" value="Next"> 
</form> 
<form class="question_form hide"> 
    <img src="image.png" class="current_image" alt=""> 
    <h3 class="question"> Question 3: </h3> 
    <hr> 
    <input type="radio" name="q3" value="q3-a">Answer 1 
    <br> 
    <input type="radio" name="q3" value="q3-b">Answer 2 
    <br> 
    <input type="radio" name="q3" value="q3-c">Answer 3 
    <br> 
    <br> 
    <input name="button" type="button" class="button" value="Next"> 
</form>