javascript - style.display ="none"在 else{} 中有效，但在 if{} 中无效

Question

JS:

 function ToggleShow(lang_option){
   var elements = document.getElementsByClassName(lang_option);
   var langs = document.getElementsByClassName("lang");
   for(var i=0,l=elements.length;i<l;i++){
     if(elements[i] in langs){
       elements[i].style.display="block";
     }else{
       elements[i].style.display="none";
    }
  }
}

HTML:

<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off" onclick="ToggleShow('lang-compiled')">
  Compiled
</button>
<div class="lang lang-interpreted">Python 3</div>
<div class="lang lang-compiled">C</div>

有效，但是如果我反转两个显示函数(将 elements[i].style.display="block"; 更改为 elements[i].style.display="none "; ，反之亦然)，按钮停止运行，控制台中没有任何错误。

Answer 1

if(elements[i] in langs){ 测试相关元素是否是 langs HTMLCollection 的属性，即当然总是假的。如果您想检查 HTMLCollection 中是否包含元素，您可以将 HTMLCollection 转换为数组并使用 .includes:

 function ToggleShow(lang_option) {
   var elements = document.getElementsByClassName(lang_option);
   var langs = [...document.getElementsByClassName("lang")];
   for (var i = 0, l = elements.length; i < l; i++) {
     if (langs.includes(elements[i])) {
       elements[i].style.display = "block";
     } else {
       elements[i].style.display = "none";
     }
   }
 }

或者，您可以将函数 trim 为类似这样的内容，以保持代码干燥:

 function ToggleShow(lang_option) {
   var langs = [...document.getElementsByClassName("lang")];
   document.querySelectorAll('.' + lang_option).forEach(element => {
     element.style.display = langs.includes(element)
     ? 'block'
     : 'none';
   });
 }