我正在使用 JavaScript 隱藏和顯示一些元素 onclick 事件
使用此代碼
function showPreOne() {
document.getElementById('SecandModalFilter').classList.add('d-none');
document.getElementById('FirstModalFilters').classList.add('d-none');
document.getElementById('colocation').classList.add('d-none');
document.getElementById('coloc-row').classList.add('d-none');
document.getElementById('preFirstModalFilter').classList.remove('d-none');
document.getElementById('FirstModalFiltersa').classList.add('d-none');
}
我認為這不是正確的方法！? 特別是如果我有一個包含很多選項卡和元素的非常大的頁面？
謝謝
uj5u.com熱心網友回復：
如果類是display: none，那么這種方法沒有任何問題。盡管如果您使用 id 陣列管理添加/洗掉元素而不是逐行執行，代碼會更易于維護。
uj5u.com熱心網友回復：
您可以在所有可以隱藏的元素上添加一個類（我假設您正在處理一個選項卡系統），然后只顯示您想要顯示的那個：
function showPreOne() {
document.querySelectorAll('.tab').forEach(elt => elt.classList.add('d-none'))
document.querySelector('#SecandModalFilter').classList.remove('d-none');
}
否則，您當前的方法并沒有錯。
uj5u.com熱心網友回復：
如果您要顯示/隱藏元素，我建議您使用切換功能，您的方法可能會更好一些。這樣你就可以只使用一個函式來管理你的點擊事件并隱藏/顯示你的元素，只要確保初始狀態（d-none 類是否存在）是正確的：
function showHide() {
document.getElementById('SecandModalFilter').classList.toggle('d-none');
document.getElementById('FirstModalFilters').classList.toggle('d-none');
document.getElementById('colocation').classList.toggle('d-none');
document.getElementById('coloc-row').classList.toggle('d-none');
document.getElementById('preFirstModalFilter').classList.toggle('d-none');
document.getElementById('FirstModalFiltersa').classList.toggle('d-none');
}
更多資訊在這里輸入鏈接描述
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/437568.html
標籤：javascript html
上一篇：您是否為錯誤驗證撰寫新的測驗用例
下一篇：單擊時保留滑鼠到父級的偏移