Question

我的意思是我会有一种问题，但每个问题只能在点击下一个按钮后继续。那么让我们说出现第一个问题，点击下一步，它将隐藏第一个问题并显示第二个问题，依此类推。

我设法显示第二个问题，但无法继续第三个问题，结果逻辑搞砸了。我需要继续第三个问题。在达到第三个问题（最后一个问题）后，下一个按钮将切换到提交按钮。

如何更改js以进入第3个问题？

HTML

<div id="container">
    <form action="" id="theform">
        <div class="qn 1st">
            <p>Qn 1</p>
            <input type="radio" name="qn1" id="one" value="one"><label for="one">one</label><br>
            <input type="radio" name="qn1" id="two" value="two"><label for="two">two</label>
        </div>
        <div class="qn 2nd">
            <p>Qn 2</p>
            <input type="radio" name="qn2" id="yes" value="yes"><label for="yes">yes</label><br>
            <input type="radio" name="qn2" id="no" value="no"><label for="no">no</label><br>
            <input type="radio" name="qn2" id="neutral" value="neutral"><label for="neutral">no</label>
        </div>
        <div class="qn 3rd">
            <p>Qn 3</p>
            <input type="radio" name="qn3" id="ohyeah" value="ohyeah"><label for="ohyeah">ohyeah</label><br>
            <input type="radio" name="qn3" id="ohno" value="ohno"><label for="ohno">ohno</label>
        </div>
        <button type="button" id="next">Next</button>
        <input type="submit" value="submit">
    </form>
</div>

JS

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){

    $("#next").click(function(){
        $(".qn").each(function(i){

            if($(this).is(":visible")){
                $(this).hide();
            }
            else if($(this).next().is(":hidden")){
                $(this).show();
            }
        });
    });

});
</script>

JsFiddle，http://jsfiddle.net/wcogrmpq/1/

Answer 1

你不需要循环。使用选择器查找可见问题。然后隐藏那个并显示下一个。

$("#next").click(function(){
    var current = $(".qn:visible");
    current.hide();
    current.next().show();
});

DEMO

如果您进入单行，可以写成：

$("#next").click(function() {
    $(".qn:visible").hide().next().show();
});

Answer 2

试试这个： -

$(document).ready(function(){
    $("#next").click(function(){
        $(".qn:visible:first").hide().next().show();                
    });

});

Demo

Answer 3

$("#next").click(function () {
    var current = $(".qn:visible"),
        total = $(".qn").length,
        last = $(".qn:last");
    $(current).next().show();
    $(current).hide();
    if ($(current).next().is(last)) {//check if it is last question
        $("#next").hide();
        $("input[type='submit']").show();
    }
});

请在此处查看updated fiddle。

如何使用click（）继续下一个表单元素并隐藏当前表单元素

3 个答案: