JavaScript切换显示

我正尝试使用vanilla JavaScript在具有相同类的元素上切换display: none和display: block。它主要工作，但出于某种原因，你需要点击按钮两次才能工作，它正在吞噬我。代码和CodePen的链接如下。JavaScript切换显示

的HTML：

<div class="a">a</div> 
<div class="b">b</div> 
<div class="c">c</div> 
<div class="d">d</div> 

<button onclick="toggle('a')">Toggle A</button> 
<button onclick="toggle('b')">Toggle B</button> 
<button onclick="toggle('c')">Toggle C</button> 
<button onclick="toggle('d')">Toggle D</button>

的JS：

function toggle(div) { 
    var divs = document.getElementsByClassName(div); 

    for(var i = 0; i < divs.length; i++) { 
     if(divs[i].style.display === "block") { 
     divs[i].style.display="none"; 
     } 
     else { 
     divs[i].style.display="block"; 
     } 
    } 

}

演示：

CodePen

来源

2014-10-16 terf

你不一定能通过t获取信息对'Element.style'对象的属性进行测试，除非该属性是专门设置的。你不能以这种方式看到CSS。 – PHPglue 2014-10-16 22:55:42

添加display: block;为DIV的CSS定义。

来源

2014-10-16 22:51:02

因此它知道在第一次点击时从块切换到无。 – klidifia 2014-10-16 22:56:28

必须以内联样式或JavaScript设置。 – PHPglue 2014-10-16 23:12:45

好吧，至少在Chrome上，如果它设置在CSS中，它会很好地工作。这可能不是一个通用的解决方案。 – 2014-10-16 23:24:51

您的var divs = document.getElementsByClassName(div);只会返回一个元素，因为只有一个具有该类的元素。

<div id="blocks'> 
    <div class="a">a</div> 
    <div class="b">b</div> 
    <div class="c">c</div> 
    <div class="d">d</div> 
</div> 

function toggle(div) { 
    var divs = document.getElementById('blocks'); 
    var ele = blocks.getElementsByTagName("div'); 
    var sty = ""; 

    for(var i = 0; i < ele.length; i++) { 
     sty = (ele[i].className.indexOf(div)) ? 'block' : 'none'; 
     ele[i].style.display = sty; 
     } 
    } 
}

来源

2014-10-16 22:57:02 jeff

添加的样式属性的div ..

<div class="a" style="display:block">a</div> 
<div class="b" style="display:block">b</div> 
<div class="c" style="display:block">c</div> 
<div class="d" style="display:block">d</div>

来源

2014-10-16 22:59:43

我会做这个：

<div class='a'>a</div> 
<div class='b'>b</div> 
<div class='c'>c</div> 
<div class='d'>d</div> 

<input type='button' id='aT' value='Toggle A' /> 
<input type='button' id='bT' value='Toggle B' /> 
<input type='button' id='cT' value='Toggle C' /> 
<input type='button' id='dT' value='Toggle D' />

把外部JavaScript代码在<head>缓存：

var pre = onload; 
onload = function(){ 
if(pre)pre(); 
var doc = document, bod = doc.body; 
function E(e){ 
    return doc.getElementById(e); 
} 
function C(n){ 
    if(doc.getElementsByClassName){ 
    return doc.getElementsByClassName(n); 
    } 
    var t = doc.getElementsByTagName('*'), a = []; 
    for(var i=0,l=t.length; i<l; i++){ 
    if(t[i].className.match(new RegExp('\\b'+n+'\\b'))){ 
     a.push(t[i]); 
    } 
    } 
    return a; 
} 
function getStyleProp(elem, prop){ 
    return getComputedStyle(elem).getPropertyValue(prop) || elem.currentStyle[prop]; 
} 
function toggle(elem){ 
    elem.style.display = getStyleProp(elem, 'display').match(/^block$/i) ? 'none' : 'block'; 
    return elem; 
} 
var btns = ['a', 'b', 'c', 'd']; 
for(var i=0,l=btns.length; i<l; i++){ 
    (function(i){ 
    var b = btns[i], c = C(b); 
    E(b+'T').onclick = function(){ 
     for(var n=0,q=c.length; n<q; n++){ 
     toggle(c[n]); 
     } 
    } 
    })(i); 
} 
}

来源

2014-10-16 23:40:23 PHPglue

JavaScript切换显示

回答

相关问题