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";
     }
   }
 }

或者，您可以将函数调整为类似的形式，以使代码保持DRY：

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

Answer 2

我们使用in检查对象中的属性，而不是值。只需更改if块的表达式以使代码正常工作即可。

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++) {
    elements[i].style.display= langs.includes(elements[i]) ? "block" : "none";
    }
 }

style.display =“ none”在else {}中有效，但在if {}

2 个答案: