-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 的元素。你应该为它使用类。

发生这种情况是因为您有两个按钮，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 回答