使用jQuery显示/隐藏字段集

Question

我有以下html代码：-

<!DOCTYPE html>
<html>
    <body>
        <fieldset>
            <legend>
                <button>
                    Show/Hide form
                </button>
            </legend>
            Name:
            <input type="text" />
            <br />
            Email:
            <input type="text" />
            <br />
            Date of birth:
            <input type="text" />
        </fieldset>

        <fieldset>
            <legend>
                <button>
                    Show/Hide form
                </button>
            </legend>
            Name:
            <input type="text" />
            <br />
            Email:
            <input type="text" />
            <br />
            Date of birth:
            <input type="text" />
        </fieldset>

        <fieldset>
            <legend>
                <button>
                    Show/Hide form
                </button>
            </legend>
            Name:
            <input type="text" />
                <br />
            Email:
            <input type="text" />
                <br />
            Date of birth:
            <input type="text" />
        </fieldset>

    </body>
</html>

但是，如果用户单击“显示/隐藏表单”按钮，又如何根据字段集的当前状态将按钮标签更改为显示或隐藏，则如何显示和隐藏字段集？ BR

Answer 1

当fieldset是隐藏的按钮也将被隐藏。 您可以修改标记并使用toggle方法：

<button class='toggle'>Hide</button>
<fieldset>
Name: <input type="text" /><br />
Email: <input type="text" /><br />
Date of birth: <input type="text" />
</fieldset>

$('.toggle').click(function(){
   var $this = $(this);
   $this.text( $this.text() == 'Show' ? "Hide" : "Show" )
   $this.next().toggle()
})

Answer 2

您的HTML代码：

<button>Show/Hide form</button>

    <fieldset>
    <legend></legend>
    Name: <input type="text" /><br />
    Email: <input type="text" /><br />
    Date of birth: <input type="text" />
    </fieldset>
    <br />
    <button>Show/Hide form</button>
    <fieldset>
    <legend></legend>
    Name: <input type="text" /><br />
    Email: <input type="text" /><br />
    Date of birth: <input type="text" />
    </fieldset>
    <br/>
    <button>Show/Hide form</button>
    <fieldset>
    <legend></legend>
    Name: <input type="text" /><br />
    Email: <input type="text" /><br />
    Date of birth: <input type="text" />
    </fieldset>

我们的jQuery代码：

 $(function(){
        $('button').click(function(){  
                if( $(this).html()=='Show/Hide form') $(this).html('Hide');
            $(this).nextAll('fieldset:first').toggle();

            $(this).html()=='Show'?($(this).html('Hide')):($(this).html('Show'));
        });
    })

您的JSFIDDLE：

http://jsfiddle.net/bzAkL/