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' 객체의 프로퍼티에 대해 esting을하는 것입니다. 그런 식으로 CSS를 볼 수 없습니다. – PHPglue

가 DIV를위한 CSS 정의에 display: block;를 추가합니다.

출처

2014-10-16 22:51:02

그래서 첫 번째 클릭에서 블록에서 아무 것도 토글하지 않습니다. – klidifia

인라인 스타일 또는 JavaScript로 설정해야합니다. – PHPglue

적어도 Chrome에서는 CSS에 설정되어 있으면 완벽하게 작동합니다. 그것은 일반적인 해결책이 아닐 수도 있습니다. –

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' />

캐싱 <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 토글 디스플레이

답변

관련 문제