Question

我有很多字段集ID。并通过JavaScript的按钮名称移动表单。例如：

HTML

<fieldset id="firstField">
        <h2 class="fs-title">Do yo have a fever?</h2>
        <input type="button" name="feveryes" class="next action-button" value="Yes" />
        <input type="button" name="feverno" class="next action-button" value="No" />
    </fieldset>

的JavaScript

$(".next").click(function(){
    if(animating) return false;
    animating = true;
    current_fs = $(this).parent();
    if($(this).attr('name') == 'feveryes')
        next_fs = $('#feveryes');
    if($(this).attr('name') == 'feverno')
        next_fs = $('#feverno');
    if($(this).attr('name') == 'coughyes')
        next_fs = $('#coughyes');
    if($(this).attr('name') == 'coughno')
        next_fs = $('#coughno');

是否可以制作按钮＆＃34;返回＆＃34;在形式的任何级别上退一步？例如：

HTML

<input type="button" name="prev" class="back action-button" value="Back" />

的JavaScript

$(".back").click(function(){
    if(animating) return false;
    animating = true;
    current_fs = $(this).parent();
    if($(this).attr('name') == 'prev')
        back_fs = $(this).parent().prev();

这段代码可能不对，但我尝试制作一个＆＃34;如果＆＃34;对于所有按钮。

请给我你的想法.. JSFiddle

Answer 1

由于您的ID始终与输入的名称相匹配，因此您的所有if语句都可以折叠为：

next_fs = $('#' + $(this).attr('name'));

您可以使用数组来跟踪以前查看过的字段集。

var progress = [];

在显示下一个屏幕之前，将当前屏幕推入阵列：

progress.push($('fieldset:visible'));

单击“返回”按钮，pop()数组中的最后一个字段集并显示它：

back_fs = progress.pop();
back_fs.show();

<强> Updated Fiddle

Answer 2

您可以为每个data-元素的“下一步”操作添加<input>标记：

<input type="button" name="feveryes" class="next action-button" data-next-fs="#feveryes" value="Yes" />

然后在点击处理程序中查找：

$(".next").click(function() {
    if (animating) return false;
    animating = true;
    current_fs = $(this).parent();
    next_fs = $($(this).data('next-fs'));
});

这使您可以更自由地了解元素名称/ ID。

一个＆＃34; IF＆＃34;对于所有输入

2 个答案: