Question

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

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

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

我无法理解我做错了什么。你能帮助我吗？这里是html

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

这里是我的javascript文字

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

问题在于，当我点击它打开的第一个并且再次点击它会关闭时，我不仅希望这样，而且当显示1个字段集时，另一个将被隐藏，反之亦然。

谢谢

Answer 1

您可以使用以下功能

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>

Answer 2

您需要在修改函数中定义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';
    }
}

Answer 3

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

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，所以没有一个是未定义的。要转移到清理代码，您可能希望将var置于方法之外（减少代码的冗余）

如何切换显示/隐藏标签

3 个答案: