Question

我正在使用一块JQuery来创建本网站描述的效果：

http://www.onextrapixel.com/2009/10/13/how-to-display-form-fields-based-on-selection-with-or-without-jquery-cookie/

我需要的是能够根据单选按钮选择显示不同的div。我已经能够成功实现网站上已经展示的内容......但是我只能为一个选择做到这一点。我想重复代码，比如5次，对于5个不同的div可能效率非常低为了简单起见，我可能会将div命名为1-5。非常感谢你的帮助！

<fieldset>
<ol class="formset">
    <li><label for="fname1">First Name: </label>
<input type="text" id="fname1" value="" name="fname1"/></li>

    <li><label for="lname1">Last Name: </label>
<input type="text" id="lname1" value="" name="lname1"/></li>

    <li><label for="email1">Email Address: </label><br />
<input type="text" id="email1" value="" name="email1" /></li>

    <li><label for="age1">Are you above 21 yrs old?</label>
<input type="radio" name="age1" value="Yes" class="aboveage1" /> Yes
<input type="radio" name="age1" value="No" class="aboveage1" /> No
<input type="radio" name="age1" value="Maybe" class="aboveage1" /> Maybe
    </li>

</ol>
<ol id="parent1" class="formset">
<li><strong>Parent/Guardian Information:</strong></li>
    <li><label for="pname1">Parent Name: </label>
<input type="text" id="pname1" value="" name="pname1"/></li>
    <li><label for="contact1">Contact No.: </label>
<input type="text" id="contact1" value="" name="contact1"/></li>
</ol>
<input type="submit" name="submit" value="Submit" class="submitbtn" />
</fieldset>

当前代码：

$(document).ready(function() { 
    $("#parent1").css("display","none");
    $(".aboveage1").click(function() { 
        if ($('input[name=age1]:checked').val() == "No" ) {
            $("#parent1").slideDown("fast"); //Slide Down Effect 
        } 
        else {
            $("#parent1").slideUp("fast"); //Slide Up Effect 
        }
    });
});

Answer 1

如果您想向下滑动符合上述情况的不同答案的元素，并且div与答案值具有相同的ID，则可以执行以下操作：

注意：为了起作用，您必须重命名与formset到子formset的答案对应的div。

$(document).ready(function() { 
    $('ol.sub-formset').css("display","none"); // display none on all ol that doesn't have formset class
    $('input[class^="aboveage"]').click(function() { 
        $('ol[class!="formset"]').slideUp("fast"); //Slide Up Effect 
        $('#' + $(this).val()).slideDown("fast"); //Slide Down Effect 
    });
});

工作示例：http://jsfiddle.net/L5qfn/

根据单选按钮选择显示不同的结果

1 个答案: