Question

我的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但没有任何改变。

Answer 1

将按钮更改为 -

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

DEMO

Answer 2

首先，你不应该有两个具有相同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);"

如何用javascript隐藏或显示html标签

2 个答案: