-2

HTML コードに 2 つの div タグがあり、それらを展開または非表示にできるクラスを定義しました。

<HTML>

    <BODY>
        <FORM>
            <script language="JavaScript">
                function setVisibility(id) {
                    if (document.getElementById('btnshowhide').value == '-') {
                        document.getElementById('btnshowhide').value = '+';
                        document.getElementById(id).style.display = 'none';
                    } else {
                        document.getElementById('btnshowhide').value = '-';
                        document.getElementById(id).style.display = 'inline';
                    }
                }
            </script>
            <FIELDSET style="width: 600px;">
                <LEGEND>
                    <input type=button name=type id='btnshowhide' value='+' onclick="setVisibility('div1');" ;/>Insert Data:</LEGEND>
                <DIV id="div1" style="display: none;">
                    <LABEL for="351fef76-b826-426f-88c4-dbaaa60f886b">Name:</LABEL>
                    <TEXTAREA id="351fef76-b826   -426f-88c4-dbaaa60f886b" name="txtname" value="Name" type="text" title="Name:">Name</TEXTAREA>
                    <BR>
                    <LABEL for="02973dcc-5677-417c-a9bf-1578f58923ef">Family:</LABEL>
                    <TEXTAREA id="02973dcc-5677-417c-a9bf-1578f58923ef" name="txtFamiy" value="Family" type="text" title="Family:">Family</TEXTAREA>
                    <BR>
                </DIV>
            </FIELDSET>
            <BR>
            <FIELDSET style="width: 600px;">
                <LEGEND>
                    <input type=button name=type id='btnshowhide' value='+' onclick="setVisibility('div2');" ;/>Insert Data:</LEGEND>
                <DIV id="div2" style="display: none;">
                    <LABEL for="d8876943-5861-4d62-9249-c5fef88219fa">Type of property</LABEL>
                    <SELECT id="d8876943-5861-4d62-9249-c5fef88219fa" name="PropertyType" value="" type="select" title="Type of property"></SELECT>
                    <BR>
                </DIV>
            </FIELDSET>
            <BR>
        </FORM>
    </BODY>

</HTML>

ボタンの ID を変更しようとしましたが、何も変わりませんでした。

4

2 に答える 2

2

ボタンを次のように変更します --

<input type="button" name="type" id="btnshowhide1" value="+" onclick="setVisibility('div1',this.id);";/> 

and 

<input type="button" name="type" id="btnshowhide2" value="+" onclick="setVisibility('div2',this.id);";/>

そして、次の関数を使用します-

function setVisibility(id,buttonid) {
  if(document.getElementById(buttonid).value=='-'){
        document.getElementById(buttonid).value = '+';
        document.getElementById(id).style.display = 'none';
  }
else{
        document.getElementById(buttonid).value = '-';
        document.getElementById(id).style.display = 'inline';
  }
}

デモ

于 2013-05-04T08:19:27.973 に答える
1

まず、同じ ID の要素を 2 つ持つべきではありません。クラスを使用する必要があります。

そして、それは両方のボタンを持っているために起こります。id="btnshowhide"そうしようとすると、document.getElementById('btnshowhide').value両方のボタンに一致します。

あなたはこのようなことをすることができます

<script language="JavaScript">
function setVisibility(id,input) 
{
    if(input.value=='-')
    {
        input.value = '+';
        document.getElementById(id).style.display = 'none';
    }
    else
    {
        input.value = '-';
        document.getElementById(id).style.display = 'inline';
    }
}
</script>

そしてあなたの入力で

onclick="setVisibility('div1', this);"
onclick="setVisibility('div2', this);"
于 2013-05-04T08:24:13.257 に答える