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

问题在于您为组件，表单，img和按钮使用相同的ID。 ID必须是唯一的（例如@ j08691 sad）

尝试将属性修改为“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>

Answer 2

将@ 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>

如何为点击功能做jquery循环

2 个答案: