JavaScript 基于复选框切换 DIV

Question

我有几个复选框和 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

这是pen

感谢您提供的任何帮助。

Answer 1

就像评论中提到的那样，您有一个案例问题需要修复“Vanilla”->“vanilla”等。

此外，也许这会对三元运算符有所帮助(我花了一段时间才理解它):通常，您希望使用三元来返回某些内容，而不仅仅是在执行两个不同条件之间切换。

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

既然你使用的是 .hideDiv类已经用于设置显示样式，您可以使用 element.classList.toggle(className)方法在两种状态之间切换，并让 vanilla js 在后台处理 bool 值。

我离开了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>