jquery - 如果不是所有字段都已填充，如何使用选项卡切换到字段集、展开以及更改类？

Question

我有一个动态构建表单的系统，有些可能包含 100 多个问题。这些问题中的每一个都包含大约 3 个不同的子问题/回答字段。子问题包含在一个 div 中：.dfcolumns在页面加载时折叠，然后我使用 jquery 切换在单击问题/图例时展开它们。

我需要在这里完成两件事：

1. Tab 到下一个字段集并打开它。（一次只打开一个会很棒，就像手风琴一样）

2. 如果填充了所有子字段，则更改字段集/图例的类（我不是在这里寻找基本的表单验证，因为我希望在此过程中发生这种情况，而不是在点击提交时）。

基本上为了更好的用户体验，我想让他的用户能够浏览问题，并知道他们在此过程中完成了哪些问题。

的HTML：

<div class="dform">
<div class="dform_element">
    <div class="dform_container">
        <fieldset>
        <legend>1. Question/Toggle Trigger</legend>
            <div class="dfcolumns">
                *a bunch of field types here…
            </div>
        </fieldset>
    </div>
</div>
<div class="dform_element">
    <div class="dform_container">
        <fieldset>
        <legend>2. Question/Toggle Trigger</legend>
            <div class="dfcolumns">
            <div class="dfcolumns">
                *a bunch of field types here…
            </div>
        </fieldset>
    </div>
</div>

CSS： .dfcolumns {display: none;}

切换功能：

    $(function(){
    $("legend").click(function(){
            $(this).parent().find(".dfcolumns").slideToggle("slow");
    });
});

这其他两个目标中的任何一个都可能吗？如果是这样，关于我将如何去做的任何想法？

非常感谢您的任何意见！

Answer 1

我使用 jquery 提供了简单的解决方案：

<ul class="nav nav-tabs"></ul>

<form class="fieldset-tabs">
    <fieldset>
        <legend>Tab 1</legend>
        **Tab 1 Cont**
    </fieldset>
    <fieldset>
        <legend>Tab 2</legend>
        **Tab Cont 2**
    </fieldset>
</div>

和javascript是：

jquery(function(){
        $('.fieldset-tabs fieldset').each(function (index) {
            var text = $(this).addClass('tab tab-'+index).find('legend').text() ;
            $('.nav.nav-tabs').append('<li><a href="#" data-toggle=".tab-'+index+'">'+text+'</a></li>') ;
        });
        $('.nav.nav-tabs li a').click(function (e) {
            e.preventDefault() ;
            var $a = $(this);
            var $li =  $a.parent().addClass('active');
            $('.nav.nav-tabs li').not($li).removeClass('active');
            $('.fieldset-tabs fieldset.tab').not($a.data('toggle')).hide();
            $($a.data('toggle')).show();
        }).eq(0).trigger('click') ;
    });