Question

我有小问题

这是JSfiddle： link example

HTML CODE

 <body>
<div class="content">
    <!-- Multistep Form -->
    <div class="main">
        <form action="" class="regform" method="get">

            <!-- Progress Bar -->
            <ul id="progressbar">
                <li class="active">01</li>
                <li>02</li>
                <li>03</li>
        <li>04</li>
            </ul>

            <!-- Fieldsets -->
            <fieldset id="first">
                <h2>press visa or master to go next question</h2>
                <div class="cc-selector">
                    <input id="visa" type="radio" name="credit-card" value="visa" />
                    <label class="kuvake visa jump-next-question" for="visa"></label>
                    <input id="mastercard" type="radio" name="credit-card" value="mastercard" />
                    <label class="kuvake mastercard jump-next-question"for="mastercard"></label>
                </div>
            </fieldset>         


            <fieldset id="second">
                <h2>02 press visa jump fourth question but if press mastercard go next question</h2>
                <div class="cc-selector">
                    <input id="visa" type="radio" name="credit-card" value="visa" />
                    <label class="kuvake visa jump-fourth-question" for="visa"></label>
                    <input id="mastercard" type="radio" name="credit-card" value="mastercard" />
                    <label class="kuvake mastercard jump-next-question"for="mastercard"></label>
                </div>  
            </fieldset>

            <fieldset id="third">
            <h2>03 press visa or master to go next question</h2>
                <div class="cc-selector">
                    <input id="visa1" type="radio" name="credit-card" value="visa1" />
                    <label class="kuvake visa1 jump-next-question" for="visa1"></label>
                    <input id="mastercard1" type="radio" name="credit-card" value="mastercard1" />
                    <label class="kuvake mastercard1 jump-next-question"for="mastercard1"></label>
                </div>
                <input class="next_btn" name="next" type="button" value="Next">
            </fieldset>

            <fieldset id="fourth">
            <h2>04</h2>
                <div class="cc-selector">
                    <input id="visa2" type="radio" name="visa2" value="visa2" />
                    <label class="kuvake visa2" for="visa2"></label>
                    <input id="mastercard2" type="radio" name="master2" value="mastercard2" />
                    <label class="kuvake mastercard2"for="mastercard2"></label>
                </div>
                <input class="next_btn" name="next" type="button" value="Next">
            </fieldset>


        </form>

jQuery代码

    $(document).ready(function() {

    $(".jump-next-question").click(function() { // Function Runs On NEXT Button Click
        $(this).closest('fieldset').next().fadeIn('slow');
        $(this).closest('fieldset').css({
            'display': 'none'
        });
    // Adding Class Active To Show Steps Forward;
    $('.active').next().addClass('active');
    });

});

$(document).ready(function() {

    $(".jump-fourth-question").click(function() { // Function Runs On NEXT Button Click
        $(this).closest('jump-fourth-question').next().fadeIn('slow');
        $(this).closest('fieldset').css({
            'display': 'none'
        });
    // Adding Class Active To Show Steps Forward;
    $('.active').next().addClass('active');
    });

});

我有一个小小的演示测验，我需要在下一个答案中得到问题并且工作正常，但当我们回答第二个问题时，如果你回答签证，你应该跳到问题编号第四并显示它但它不会工作

这里有任何帮助吗？

感谢。

Answer 1

您的代码中的问题是由于.closest()类的点击事件中的.jump-fourth-question。由于您正在搜索距离最近且具有相同类名的内容，因此它会再次重定向到02。使用display:none就可以了。所以你没有得到任何结果。

另一个问题是你正在使用文档$(document).ready(function(){});两次。避免使用。

你的Jquery应该是：

$(document).ready(function() {

  $(".jump-next-question").click(function() { // Function Runs On NEXT Button Click
    $(this).closest('fieldset').next().fadeIn('slow');
    $(this).closest('fieldset').css({
      'display': 'none'
    });
    // Adding Class Active To Show Steps Forward;
    $('.active').next().addClass('active');
  });


  $(".jump-fourth-question").click(function() { // Function Runs On NEXT Button Click
    $(this).closest('fieldset').next().next().fadeIn('slow');
    $(this).closest('fieldset').css({
      'display': 'none'
    });
    // Adding Class Active To Show Steps Forward;
    $('.active').next().next().addClass('active');
  });

});

编辑：

是的，您可以直接使用id #fourth

$(".jump-fourth-question").click(function() { 
    $('#fourth').fadeIn('slow');
});

Answer 2

问题是您使用了错误的选择器。您正在选择显示/隐藏按钮而不是字段集本身。

这是一个工作示例： . http://jsbin.com/filaluhiti/edit?css,js,console,output

PS：你只需要出现一次“文件就绪”

Jquery不能按类显示div

2 个答案: