首頁猿問 JavaScript...

JavaScript 基于復選框切換 DIV

JavaScript

叮當貓咪 2023-08-18 13:57:07

我有幾個復選框和 div。我想根據復選框切換 div。我嘗試使用三元來切換 div，但它沒有按我的預期工作。下面是js。我不想使用 jQuery。function toggle(flavor){? var checkBox = document.getElementById(flavor)? checkBox === true ? document.getElementById(flavor+"Div").style.display = "block" : document.getElementById(flavor+"Div").style.display = "none";}這是我得到的錯誤： pen.js:4 Uncaught TypeError: Cannot read property 'style' of null感謝您的任何幫助，您可以提供。

查看完整描述

3 回答

有只小跳蛙

TA貢獻1824條經驗獲得超8個贊

你的筆上有一些拼寫錯誤。JavaScript 區分大小寫，因此 vanillaDiv 和 VanillaDiv 不是同一件事。您的所有 DIV 均以小寫字母開頭，而復選框均以大寫字母開頭，因此您永遠無法正確匹配該元素。

編輯：（僅供記錄）要正確驗證是否選中復選框，您需要使用該.checked屬性。（忘記寫這部分文本，盡管我發布的代碼從一開始就進行了此更正）。

所以改變：

</div>

到：

</div>

此外，使用.checked復選框屬性和三元更簡單的方法是：

function toggle(flavor){

var checkBox = document.getElementById(flavor).checked;

document.getElementById(flavor+"Div").style.display = checkBox === true ? "block" : "none";

}

反對回復 2023-08-18

30秒到達戰場

TA貢獻1828條經驗獲得超6個贊

就像評論中提到的那樣，您有一個案例問題需要修復“Vanilla”->“vanilla”等。

另外，也許這對三元運算符會有幫助（我花了一段時間才理解它）：通常，您希望使用三元來返回某些內容，而不僅僅是在執行兩個不同條件之間切換。

IE。let newVar = checkSomething === checkAgainst ? this : that

由于您已經使用一個.hideDiv類來設置顯示樣式，因此您可以使用該element.classList.toggle(className)方法在兩種狀態之間切換，并讓 vanilla js 在后臺處理布爾值。

我將其留console.log(thing)在片段中只是因為它可以幫助我了解每個點的內容。

function toggle(flavor){

var checkBox = document.getElementById(flavor)

console.log(checkBox)

let divElement = document.getElementById(flavor+"Div")

console.log(divElement)

divElement.classList.toggle('hideDiv')

}

.hideDiv{

display:none

}

<input type="checkbox" id="vanilla" onClick="toggle('vanilla')"/> Vanilla

<input type="checkbox" id="cherry" onClick="toggle('cherry')"/> Cherry

<input type="checkbox" id="apple" onClick="toggle('apple')" /> Apple

</div>

</div>

</div>

反對回復 2023-08-18

呼啦一陣風

TA貢獻1802條經驗獲得超6個贊

有兩個問題：

html 事件應該具有相同的目標大小寫級別，您當前正在嘗試獲取 DOM 中存在的像“VanillaDiv”而不是“vanillaDiv”這樣的 id。
javascript 代碼需要檢查element.checked屬性而不是詢問element === true

function toggle(flavor) {

const checkbox = document.getElementById(flavor);

const textarea = document.getElementById(flavor+"Div");

// here you need to use .checked instead of element

textarea.style.display = checkbox.checked ? "block" : "none";

}

.hideDiv {

display: none

}

<input type="checkbox" id="vanilla" onClick="toggle('vanilla')"/> Vanilla

<input type="checkbox" id="cherry" onClick="toggle('cherry')"/> Cherry

<input type="checkbox" id="apple" onClick="toggle('apple')" /> Apple

<textarea id="vanComments">vanilla</textarea>

</div>

<textarea id="cherComments">cherry</textarea>

</div>

<textarea id="appComments">apple</textarea>

</div>

反對回復 2023-08-18

3 回答
0 關注
165 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

JavaScript 基于復選框切換 DIV

JavaScript 基于復選框切換 DIV

3 回答

添加回答