3 回答

TA贡献1824条经验 获得超8个赞
你的笔上有一些拼写错误。JavaScript 区分大小写,因此 vanillaDiv 和 VanillaDiv 不是同一件事。您的所有 DIV 均以小写字母开头,而复选框均以大写字母开头,因此您永远无法正确匹配该元素。
编辑:(仅供记录)要正确验证是否选中复选框,您需要使用该.checked属性。(忘记写这部分文本,尽管我发布的代码从一开始就进行了此更正)。
所以改变:
<div id="vanillaDiv" class="hideDiv">
<textarea id="vanComments"></textarea>
</div>
到 :
<div id="VanillaDiv" class="hideDiv">
<textarea id="vanComments"></textarea>
</div>
此外,使用.checked复选框属性和三元更简单的方法是:
function toggle(flavor){
var checkBox = document.getElementById(flavor).checked;
document.getElementById(flavor+"Div").style.display = checkBox === true ? "block" : "none";
}

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 id="vanillaDiv" class="hideDiv">
<textarea id="vanComments"></textarea>
</div>
<div id="cherryDiv" class="hideDiv">
<textarea id="cherComments"></textarea>
</div>
<div id="appleDiv" class="hideDiv">
<textarea id="appComments"></textarea>
</div>

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
<div id="vanillaDiv" class="hideDiv">
<textarea id="vanComments">vanilla</textarea>
</div>
<div id="cherryDiv" class="hideDiv">
<textarea id="cherComments">cherry</textarea>
</div>
<div id="appleDiv" class="hideDiv">
<textarea id="appComments">apple</textarea>
</div>
添加回答
举报