0

我有以下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

4

2 回答 2

3

当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()
})
于 2012-08-30T09:45:09.143 回答
0

您的 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/

于 2012-08-30T10:05:28.583 回答