所以我正在用 HTML 構建一個表單，它使用了很多復選框和隱藏的 Div。現在我正在使用
function HideDiv1() {
var checkBox = document.getElementById("Check1");
var div = document.getElementById("Div1");
if (checkBox.checked == true) {
div.style.display = "block";
} else {
div.style.display = "none";
}
}<input type="checkbox" id="Check1">CheckBox to show Div1
<div id="Div1" style="display: none;">I should be hidden, assuming the author didn't mess up!</div>根據相應的復選框隱藏每個 div。但這意味著我每次都在復制和重寫此函式，并且我希望保留函式的部分變得非常大。我想知道是否有一種更簡單的方法來做到這一點，這樣我只需要一個函式，我就可以動態地顯示和隱藏 Div，而無需每次都復制和重寫這個函式。
（如果有一些簡單的 JQuery 解決方案：請記住，我不知道如何使用 JQuery）
這可能是重復的，我以前看過一次答案，但我不知道如何再次找到它:(
uj5u.com熱心網友回復：
您可以使用資料屬性來確定div更改復選框時要顯示的內容。
您可以通過偵聽change每個復選框上的事件并切換相應的div來實作此目的jQuery.toggle：
$('input[type=checkbox]').change(function(){
$('div[data-id=' $(this).data('target') ']').toggle()
})<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" data-target="1">CheckBox to show Div1
<div style="display: none;" data-id="1">Div1</div>
<br/>
<input type="checkbox" data-target="2">CheckBox to show Div2
<div style="display: none;" data-id="2">Div2</div>Vanilla JS 實作：
document.addEventListener('click', function(e){
if(e.target.matches('input[type=checkbox]')){
let target = document.querySelector('div[data-id="' e.target.dataset.target '"]');
target.style.display = target.style.display == "none" ? "block" : "none";
}
})<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" data-target="1">CheckBox to show Div1
<div style="display: none;" data-id="1">Div1</div>
<br/>
<input type="checkbox" data-target="2">CheckBox to show Div2
<div style="display: none;" data-id="2">Div2</div>uj5u.com熱心網友回復：
您可以向復選框添加一個 onchange 屬性以呼叫一個名為 hideDiv 的函式，并向它傳遞兩個引數，即復選框的 id 和您使用該復選框隱藏的 div：
onchange="hideDiv("check1","div1")"
...然后 hideDiv 使用傳遞給它的引數來切換正確的 div：
function hideDiv(checkId, divId) {
const checkbox = document.getElementById(checkId)
const div = document.getElementById(divId);
if (checkBox.checked == true) {
div.style.display = "block";
} else {
div.style.display = "none";
}
}
養成對需要更改的變數使用let ，對不會更改 value 而不是var 的變數使用const的習慣。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/319128.html
標籤：javascript html css 动态的 展示
上一篇：使用css以特定寬度縮小網站
下一篇：Onclick函式回傳參考錯誤