javascript - 使用 javascript 显示/隐藏项目

Question

我使用 JavaScript 开发了一个 3D 模型。

我需要使用复选框显示/隐藏模型中的特定项目。

在 html 文件中，复选框已实现。

<div id= "shower" class="row-shower" /div>
<input type="checkbox" id="show-shower" /> 
<label for="show-shower"> show/hide shower </label>

在JS文件中，调用函数:

var elem = document.getElementById('shower'),
  showshower = document.getElementById("show-shower");
  showshower.checked = true;
  showshower.onchange = function() {
    elem.style.display = this.checked ? 'cubicle' : 'none';
  };
  showshower.onchange();

CSS 代码:

.cubicle {
    display:block;
}

.hideCubicle {
   display:none;
}

我当前面临的问题是，当单击显示/隐藏复选框时，整个模型都会消失。我只需要淋浴消失。不是整个模型。

有什么建议如何执行此操作吗？

Answer 1

 var elem = document.getElementById('shower');
 showshower = document.getElementById("show-shower");

 showshower.onchange = function ()
 {
     elem.classList = this.checked ? 'cubicle' : 'hideCubicle';
 };

http://jsfiddle.net/2kan1r80