使用 javascript 显示/隐藏项目答案

【问题标题】：show/hide item using javascript使用 javascript 显示/隐藏项目
【发布时间】：2023-04-02 04:13:01
【问题描述】：

我使用 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;
}

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

任何建议如何执行此操作？

【问题讨论】：

首先，这里有一个未闭合/格式错误的 div 标签：<div id= "shower" class="row-shower" /div>
您是否尝试过更改类而不是显示属性？

标签： javascript

【解决方案1】：

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

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

http://jsfiddle.net/2kan1r80

【讨论】：

【解决方案2】：

您可以更改尝试代码，请参阅

    $(document).ready(function(){
    	$(".show-content").hide();
        $('.check').change(function() {
	        if($(this).is(":checked")) {
	            $(".show-content").show(); 
	        }
	        else{
	        	$(".show-content").hide(); 
	        }
	               
    	});
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<label>Show/Hide</label>
	<input type="checkbox" class="check">
	<div class="show-content">
		I have developed a 3D model using JavaScript.

		I need to show/hide a specific item in the model using a checkbox.

		In the html file the checkbox has implemented.

	</div>

【讨论】：

【解决方案3】：

我找到了解决办法。

我只是将以下代码添加到 JS 文件中。

if(checked){
                pSpec.cubicle.visible=false;


                console.log("hide");
            }
else
          {
                pSpec.cubicle.visible=true;


                console.log("show");
            }

您可能想知道 pSpec 变量的来源。这是我用来在模型中创建分区的变量。我没有分享整个代码，因为它有很多编码。

【讨论】：