0

我是 jquery 的新手，需要有关表单的帮助，这是一个在多个步骤中破坏的单个表单 (7)。所以在第一步（见下面的代码）我有 5 个单选按钮：学校、朋友、家庭、健康和活动。我想要实现的是，如果用户选择单选按钮学校并单击“下一步”按钮，它将显示一个包含与学校相关的问题的 div，如果它选择朋友，它将显示一个包含朋友相关问题的 div，等等关于...那些特定于主题的 div 在文档加载时隐藏。

拜托了，这里的新手。对此的任何帮助将不胜感激:)

<div class="form">
    <h2>What interests you? (select one)</h2>

    <label class="val" style="width:250px;color:red;">Please select one</label><br> 
    <input type="radio" id="school" name="path" value="school" /> School <br>    
    <input type="radio" id="home" name="path" value="home" /> Home <br>         
    <input type="radio" id="friends" name="path" value="friends" /> Friends <br>           
    <input type="radio" id="activities" name="path" value="activities" /> Activities <br>
    <input type="radio" id="health" name="path" value="health" /> Health <br>
 </div>
 <div class="clear"></div><!-- /clearfix -->
 <button class="btn btn-primary" type="submit" name="submit_first" id="submit_first" value="">Next</button>
 </div>     
 <!-- clearfix --><div class="clear"></div><!-- /clearfix -->
 <div id="step1-1"></div>
 <div id="step1-2"></div>
 <div id="step1-3"></div>
 <div id="step1-4"></div>
 <div id="step1-5"></div>
4

4 回答 4

0

点击简单按钮试试这个

var val = $('input:radio[name=path]:checked').val();

switch (val )
{
case 'school':
  $('#step1-1').show();
  break;
case 'home':
  $('#step1-2').show();
  break;
case 'friends':
  $('#step1-3').show();
  break;
case 'activities':
 $('#step1-4').show();
  break;
case 'health':
  $('#step1-5').show();
  break;
default:

}
于 2013-08-15T17:31:34.250 回答
0

假设文档已加载并且您质疑 div 被隐藏，您可以执行以下操作：

$('div.form button').click( function() {
    var value = $('div.form input').val();
    switch (value) {
        case 'school':
            $('#step1-1').show();
        break;
        case 'home':
            $('#step1-2').show();
         break;
        case 'friends':
            $('#step1-3').show();
         break;
        case 'activities':
            $('#step1-4').show();
        break;
        case 'health':
            $('#step1-5').show();
        break;
    }
});
于 2013-08-15T17:39:50.983 回答
0

我在这里对您的标记采取了一些自由，并通过一些假设猜测了您的意图。

跳到这个小提琴看看它是如何工作的：http: //jsfiddle.net/rRmRY/

  • 使您的step1-X元素成为过程中的步骤。
  • 为步骤中的每个选择假设某种形式 - 我以学校为例
  • 给表格一些内在的智慧
  • 使按钮不是提交按钮
  • 通过使它们成为标签而不仅仅是每个标签的文本，使单选标签可点击
  • 在下一个表格（学校表格）上放一个“上一个”按钮

只需选择“学校”单选按钮，然后单击“下一步”按钮即可在下一步中查看空的学校表格。我让你把你想要的东西放在那里并添加更多的表格等。如果你复制以前的表格作为开始，代码应该是通用的。

修订后的标记：（不完整，请您完成）

<div id="step0" class="steps" data-nextstep="step1-1">
    <div class="form"><span class="action">none</span>
         <h2>What interests you? (select one)</h2>
        <label class="val">Please select one</label>
        <label for="school">
            <input type="radio" id="school" name="path" value="school" />School</label>
        <label for="home">
            <input type="radio" id="home" name="path" value="home" />Home</label>
        <label for="home">
            <input type="radio" id="friends" name="path" value="friends" />Friends</label>
        <label for="activities">
            <input type="radio" id="activities" name="path" value="activities" />Activities</label>
        <label for="health">
            <input type="radio" id="health" name="path" value="health" />Health</label>
    </div>
    <button class="btn btn-primary formNext" type="button" name="submit_first" id="submit_first" value="">Next</button>
</div>
<div id="step1-1" class="steps" data-nextstep="step1-2">Step 1
    <div class="form school">school
        <button class="previous">Previous Form</button>
    </div>
</div>
<div id="step1-2" class="steps"></div>
<div id="step1-3" class="steps"></div>
<div id="step1-4" class="steps"></div>
<div id="step1-5" class="steps"></div>

代码：

// hide all the steps and forms, then show the first one
$('.steps, .form').hide().eq(0).show().find('.form').eq(0).show();
// form radio change action, uses the values, adds that as "action" to the Next button
$('.form').on('change', 'input:radio', function () {
    $(this).parents('.steps').find('.formNext').data('action', $(this).val());
    $(this).parents('.steps').find('.action').text($(this).val());
});
// put some action on the Next button, using the action from the radio choice
// hide the form, show the one choosen
$('.formNext').click(function () {
    var nextForm = $(this).parents('.steps').data('nextstep');
    var action = $(this).data('action');
    if (action && action.length) {
        $(this).siblings('.form').find('.action').text(action + " is " + nextForm + " action");
        $('#' + nextForm).show().find('.form.' + action).show();
        $(this).parents('.steps').hide();
    };
});
// event handler for new Previous button on second form
$('.previous').click(function () {
    $(this).parents('.steps').hide().find('.form').hide();
    $(this).parents('.steps').prev().show();
});

请注意，我在各个地方添加了一些类以使代码更小/更容易。

于 2013-08-15T18:53:30.487 回答
0

根据您的最终选择和您创建的小提琴，这里作为一个简单的重构来考虑：

为接下来的步骤添加一个类“步骤”并为每个值添加一个。例如：

<div id="step1" class='steps initial'>

还有这里：

<div id="step1-1" class="school steps">
<div id="step1-2" class="home steps">
...

替换所选答案中的所有代码以及您的小提琴：

var val = $('input:radio[name=path]').val();
$('.steps.initial').slideUp();// class added to the initial one (see above)
$('.steps.' + val).slideDown();

在这里使用带有注释更改的小提琴查看它：

http://jsfiddle.net/Cxfgj/9/

于 2013-08-16T12:55:27.093 回答