如何切换显示/隐藏标记

我不是一个程序员，所以我希望如果我会写不正确的东西，你会原谅我。如何切换显示/隐藏标记

我有两个字段集有两个不同的“身份证”

我试着写在javascript代码，当我展示1号2号将在墙根，反之亦然。

我不明白我在做错的地方。你能帮我吗？这里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个字段时，另一个将被隐藏，反之亦然。

谢谢

来源

2017-03-01 S. Iandolo

在'modify'下你正在玩id'x'的样式而不是'y' – Smit

'x'在'add'的范围内定义，所以它在'modify'里面是'undefined'！ –

在这两个函数的顶部和外部使'var x = ...;'和'var y = ...;'！ –

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

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

来源

2017-03-01 17:29:18

当显示'修改'时，点击'添加'，它不会显示。 x.style.display ='block'需要在其他块中添加 – Abhishek

简单的修复，如果你想得到工作。

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外（降低代码的冗余）

来源

2017-03-01 17:29:21 Smit

使用这个解决方案，当我点击打开并点击关闭相同的fieldset时，它可以工作，但如果我点击第二个打开的第一个，第一个开启 –

@ S.Iandolo更新！ – Smit

我在两个函数中都添加了一行。在添加了else后，我添加了：在第一个y.style.display ='none'和第二个x.style.display ='none' –

您可以使用以下功能

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>

来源

2017-03-01 17:34:08 Abhishek

我有同样的问题，当我点击第一个确定，当我点击第二个确定但当我点击再次第二个，第一个仍然开放 –

@ S.Iandolo我已经更新了处理上述案例的答案。尝试一次更新的答案 – Abhishek

如何切换显示/隐藏标记

回答

相关问题