Jquery 如果不是所有字段都已填充，如何将选项卡设置为字段集、展开以及更改类？

我有一个动态构建表单的系统，其中一些表单可能包含100多个问题。每个问题包含大约3个不同的子问题/回答字段。子问题被包装在一个div:

.dfcolumns

中，该div在页面加载时被折叠，然后我在单击问题/图例时使用jquery切换来展开它们

我还需要完成两件事：

<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>

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

选项卡切换到下一个字段集并将其打开。（一次只能打开一个，就像手风琴一样，这太棒了）

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

基本上为了更好的用户体验，我想让用户能够通过标签浏览问题，并知道他们已经完成了哪些问题

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>

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

这两个目标中的任何一个都有可能实现吗？如果是的话，我会怎么做呢

---

非常感谢您的任何意见

我使用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>

表1
**表1续**
表2
**表续2**

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

jquery（函数（）{
$（'.fieldset选项卡fieldset'）。每个（函数（索引）{
var text=$（this）.addClass（'tab-tab-'+index）.find（'legend'）.text（）；
$（'.nav.nav选项卡'）。追加（'
'）；
});
$（'.nav.nav-tabs li a'）。单击（函数（e）{
e、 预防默认值（）；
var$a=$（本）；
var$li=$a.parent（）.addClass（'active'）；
$（'.nav.nav-tabs li'）。而不是（$li）。removeClass（'active'）；
$（'.fieldset tabs fieldset.tab'）.not（$a.data（'toggle'））.hide（）；
$（$a.data（'toggle'））.show（）；
}).eq（0）.触发器（“单击”）；
});
<>代码>所有可能，但您可能需要考虑查看表单向导插件。以可见形式显示的选项卡将转到下一个字段，但若该字段被隐藏，它将被绕过，所以必须编写代码来处理该字段。很有可能你可以找到一个插件，它有很多你需要的功能，而不需要太多的手工编码