Javascript Jquery无法按类显示div_Javascript_Jquery_Html_Frontend_Jsfiddle

Javascript Jquery无法按类显示div

javascript jquery html

Javascript Jquery无法按类显示div,javascript,jquery,html,frontend,jsfiddle,Javascript,Jquery,Html,Frontend,Jsfiddle,我有个小问题以下是JSFIDLE： HTML代码 <body> <div class="content">  <div class="main"> <form action="" class="regform" method="get">  <u

我有个小问题

以下是JSFIDLE：

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>

我有一个小的演示测验，我需要让问题转到下一个答案，这很好，但是当我们是第二个问题时，如果你回答了visa，你应该跳到第四个问题，并展示它，但它不起作用

有人帮忙吗

谢谢。

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

以下是一个工作示例：

。http://jsbin.com/filaluhiti/edit?css，js，控制台，输出

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

代码中的问题是由于

.closest（）

在类的单击事件中

。跳转第四个问题

。由于您正在搜索具有相同类名的最近的类，它将再次重定向到

，并且您正在对其使用

display:none

。因此您不会得到任何结果

另一个问题是您正在使用document

$（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');
});

请不要破坏“问题中的代码”规则。它的存在是有原因的；链接腐烂。如果JSFIDLE失败，您的问题将无法回答，而且对任何未来的访问者来说都是无用的。真糟糕！非常感谢。仅在intrest中，是否可以通过字段集id搜索并显示它？类似（“.跳转第四个问题”）。单击并按id显示字段集
$(".jump-fourth-question").click(function() { 
    $('#fourth').fadeIn('slow');
});