如何切換顯示/隱藏標記

我不是一個程序員，所以我希望如果我會寫不正確的東西，你會原諒我。如何切換顯示/隱藏標記

我有兩個字段集有兩個不同的「身份證」

我試着寫在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

如何切換顯示/隱藏標記

回答

相關問題