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

时间:2018-07-28 05:33:08

标签: javascript html

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";,反之亦然),则按钮将停止运行,而控制台中不会出现任何错误。

2 个答案:

答案 0 :(得分:3)

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';
   });
 }

答案 1 :(得分:0)

  

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