Jquery 无法通过 class 显示 div

Question

我有一个小问题

这是 JSfiddle： link example

HTML 代码

 <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

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

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

PS ：您只需要出现一次 "Document ready"

Answer 2

您的代码中的问题是由于 .closest() 在 class .jump-fourth-question 的点击事件中造成的。由于您正在搜索具有相同 class 名称的最接近它，因此它正在重定向再次 02 并且您使用 display:none 作为 it.So 您没有得到任何结果。

另一个问题是您正在使用文档 $(document).ready(function(){}); twice.Avoid ding that.

您的 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');
});

Jquery 无法通过 class 显示 div

Jquery cant show div by class

html

javascript

jquery

frontend

jsfiddle