Javascript 如何切换显示/隐藏标记

我不是程序员，所以如果我写的东西不正确，希望你能原谅我

我有两个字段集，有两个不同的“id”

我试图用javascript编写一个代码，当我显示第一个时，第二个将被隐藏，反之亦然

我不明白我哪里做错了。 你能帮助我吗？ 这里是html

<label onclick="add()"></label>
<label onclick="modify()"></label>
<fieldset id="add">some text</fieldset>
<fieldset id="modify">some other text</fieldset>

问题是，我不仅希望当我点击第一个字段集时它会打开，再点击一次它就会关闭，而且当显示一个字段集时，另一个字段集会隐藏，反之亦然

---

谢谢

您需要在修改函数中定义x。或者像@ibrahim说的，只是在sope之外定义了这两个变量

function modify() {
    var y = document.getElementById('modify');
    var x = document.getElementById('add')
    if (y.style.display === 'none') {
        y.style.display = 'block';
        x.style.display = 'none';
    } else {
        y.style.display = 'none';
    }
}

---

简单的修复，如果你想开始工作

function add() {
    var x = document.getElementById('add');
    var y = document.getElementById('modify');
    if (x.style.display === 'none') {
        x.style.display = 'block';
        y.style.display = 'none';
    } else {
        x.style.display = 'none';
    }
}
function modify() {
    var x = document.getElementById('add');
    var y = document.getElementById('modify');
    if (y.style.display === 'none') {
        y.style.display = 'block';
        x.style.display = 'none';
    } else {
        y.style.display = 'none';
    }
}

---

正如您所看到的，这两个变量都有x和y变量，因此它们都是未定义的。要移动到干净的代码，您可能希望将var带到方法之外（减少代码的冗余）

您可以使用下面的函数

function hideShow(targetId) {
    var targetNode = document.getElementById(targetId);
    if(targetNode.style.display === 'block') {
        return; // If click is on the node which is already shown, just return
    }
    var x = document.getElementById('add');
    var y = document.getElementById('modify');
    if (x.style.display === 'none') {
        x.style.display = 'block';
        y.style.display = 'none';
    } else {
        y.style.display = 'block';
        x.style.display = 'none';
    }
}

并对两者使用相同的功能

<label onclick="hideShow('add')"></label>
<label onclick="hideShow('modify')"></label>
<fieldset id="add">some text</fieldset>
<fieldset id="modify">some other text</fieldset>

一些文本
其他一些文本

在

modify

下，您正在玩id的样式

x

而不是

y

x

是在

add

的范围内定义的，因此

未定义
在
modify
内！使
var x=和
变量y=位于两个功能的顶部和外部！使用此解决方案，当我单击打开并单击关闭同一字段集时，它会工作，但如果我在第二个字段集上单击第一个打开的字段集，则第一个字段将保持打开状态。我在两个函数中都添加了一行。在这两个中的else之后，我添加了：在第一个y.style.display='none'和第二个x.style.display='none'中，我还添加了
y.style.display='none'add（）中的code>和
x.style.display='none'
在
modify（）
中，我遇到了相同的问题，当我单击第一个按钮时，全部确定；当我单击第二个按钮时，确定；但是当我再次单击第二个按钮时，第一个按钮仍然存在open@S.Iandolo我已经更新了答案以处理上述案件。请在显示“修改”时尝试更新的答案，单击“添加”后，将不会显示更新的答案。x、 style.display='block'需要添加到else块中
<label onclick="hideShow('add')"></label>
<label onclick="hideShow('modify')"></label>
<fieldset id="add">some text</fieldset>
<fieldset id="modify">some other text</fieldset>