javascript - Javascript - 选择时,试图显示不同的HTML段落

  显示原文与译文双语对照的内容

我有一个模式,它应该提供一个不同的描述性段落,这取决于用户从下拉列表中做出的选择,目前它只显示所有段落,选中Public时显示'',选中'隐藏2'时显示'',等等等等。


<html> 


<head> 


<script type="text/javascript">



 function CheckSelect(val){


 var PUBLIC=document.getElementById('Hide');


 var INTERNAL=document.getElementById('Hide2');


 var CONFIDENTIAL=document.getElementById('Hide3');


 var SECRET=document.getElementById('Hide4');



 if(val=='PUBLIC')


 PUBLIC.style.display='block';


 else if (val=='INTERNAL')


 INTERNAL.style.display='block';


 else if (val=='CONFIDENTIAL')


 CONFIDENTIAL.style.display='block';


 else if (val=='SECRET')


 SECRET.style.display='block';


 else 


 PUBLIC.style.display='none';



}



</script> 


</head>


<body>


<select id="selectDocumentType" name="documentClass" onchange='CheckSelect(this.value);'>


 <option value="Choose">Choose a classification!</option>


 <option value="PUBLIC">Public</option>


 <option value="INTERNAL">Internal</option>


 <option value="CONFIDENTIAL">Confidential</option>


 <option value="SECRET">Secret</option>


 </select>


<p align="justify" style="font-family:helvetica,garamond,serif;font-size:12px;font-style:regular;" class="light"


 id="Hide" style='display:none;'>Wizard Is working</p>


<p align="justify" style="font-family:helvetica,garamond,serif;font-size:12px;font-style:regular;" class="light"


 id="Hide2" style='display:none;'>Wizard Is Twerking</p> 


<p align="justify" style="font-family:helvetica,garamond,serif;font-size:12px;font-style:regular;" class="light"


 id="Hide3" style='display:none;'>Wizard Is Laughing</p>


<p align="justify" style="font-family:helvetica,garamond,serif;font-size:12px;font-style:regular;" class="light"


 id="Hide4" style='display:none;'>Wizard Is Eating</p> 


</body>

时间:

缺少代码'如果选择了适当的值,则不要隐藏,否则隐藏'的逻辑;换句话说,你的if语句不正确。

也就是说,最好用classList.toggle('show', <predicate>为了避免重复()本质上是相同的if/else语句。

关于可读性和最佳实践,代码还有许多其他问题,我不会列举所有这些,但下面是你应该为之而设的。


const $ = document.querySelector.bind(document);



$('#selectDocumentType').addEventListener('change', () => {


	[


		['public', 'hide'],


		['internal', 'hide2'],


		['confidential', 'hide3'],


		['secret', 'hide4'],


	].forEach(([value, elId]) => $(`#${elId}`).classList.toggle('show', value === $('#selectDocumentType').value));


});

p.light {


 font-family: helvetica, garamond, serif;


 font-size: 12px;


 font-style: normal;


 display: none;


}



p.show {


 display: block;


}

<select id="selectDocumentType" name="documentClass">


	<option value="Choose">Choose a classification!</option>


	<option value="public">Public</option>


	<option value="internal">Internal</option>


	<option value="confidential">Confidential</option>


	<option value="secret">Secret</option>


</select>


<p class="light hidden" id="hide">Wizard Is working</p>


<p class="light hidden" id="hide2">Wizard Is Twerking</p>


<p class="light hidden" id="hide3">Wizard Is Laughing</p>


<p class="light hidden" id="hide4">Wizard Is Eating</p>

在不更改原始代码的情况下,只需在if-else语句中将某些项设置为display时设置其他项以显示none,还有delete html代码中的额外style属性。希望这有帮助


<html> 


<head> 


<script type="text/javascript">



 function CheckSelect(val){


 var PUBLIC=document.getElementById('Hide');


 var INTERNAL=document.getElementById('Hide2');


 var CONFIDENTIAL=document.getElementById('Hide3');


 var SECRET=document.getElementById('Hide4');



 if(val=='PUBLIC'){


 PUBLIC.style.display='block';


 INTERNAL.style.display='none';


 CONFIDENTIAL.style.display='none';


 SECRET.style.display='none';


 }


 else if (val=='INTERNAL'){


 INTERNAL.style.display='block';


 PUBLIC.style.display='none';


 CONFIDENTIAL.style.display='none';


 SECRET.style.display='none';


 }


 else if (val=='CONFIDENTIAL'){


 CONFIDENTIAL.style.display='block';


 PUBLIC.style.display='none';


 INTERNAL.style.display='none';


 SECRET.style.display='none';


 }


 else if (val=='SECRET'){


 SECRET.style.display='block';


 PUBLIC.style.display='none';


 INTERNAL.style.display='none';


 CONFIDENTIAL.style.display='none';


 }


 else {


 PUBLIC.style.display='none';


 SECRET.style.display='none';


 INTERNAL.style.display='none';


 CONFIDENTIAL.style.display='none';


 }


}



</script> 


</head>


<body>


<select id="selectDocumentType" name="documentClass" onchange='CheckSelect(this.value);'>


 <option value="Choose">Choose a classification!</option>


 <option value="PUBLIC">Public</option>


 <option value="INTERNAL">Internal</option>


 <option value="CONFIDENTIAL">Confidential</option>


 <option value="SECRET">Secret</option>


 </select>


<p align="justify" style="font-family:helvetica,garamond,serif;font-size:12px;font-style:regular;display:none;" class="light"


 id="Hide" >Wizard Is working</p>


<p align="justify" style="font-family:helvetica,garamond,serif;font-size:12px;font-style:regular;display:none;" class="light"


 id="Hide2">Wizard Is Twerking</p> 


<p align="justify" style="font-family:helvetica,garamond,serif;font-size:12px;font-style:regular;display:none;" class="light"


 id="Hide3">Wizard Is Laughing</p>


<p align="justify" style="font-family:helvetica,garamond,serif;font-size:12px;font-style:regular;display:none;" class="light"


 id="Hide4">Wizard Is Eating</p> 


</body>

...