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