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切換顯示

回答

相關問題