2014-12-31 9 views
1

두 번 클릭하지 않으면 내 onclick 기능이 실행되지 않습니다. 나는 javascript에 매우 익숙하다. 그러나 지금까지 trie는 var obj 라인을 돌아 다니며 == "none"을 "none"으로 바꾼다. "empty"; 둘 다 내가 이해하지 못했지만 다른 사람들이이 문제를 해결하는 것을 보았습니다. 어느 쪽도 효과가 없었다.onclick을 두 번 클릭하여 실행해야합니다.

<a href="#" onClick="showDiv('show1')">+</a> 

function showDiv(id){ 
var obj = document.getElementById(id); 
if(obj.style.display == "none") { 
obj.style.display='block' 
} 
else{ 
obj.style.display='none'  
} 
} 


<div id="show1"> 
Roughly 2-3 months. 
</div> 
+0

"show1"id를 사용하여 div에 대한 마크 업을 표시하십시오. – dario

+0

클래스를 사용하여 요소를 표시하거나 숨 깁니다. – epascarello

답변

6

귀하의 문제는 요소의 style 속성을 직접 사용한다는 것입니다. 코드에서 obj.style.display = "none";을 명시 적으로 설정하지 않았다면 첫 번째 클릭까지 값은 undefined으로 유지됩니다. 첫 번째 클릭 후 설정되고 모든 것이 원하는대로 작동합니다.

해결하려면 getComputedStyle()을 사용하여 요소 스타일에 액세스하십시오. 여기에는 CSS를 통해 설정된 모든 스타일이 포함됩니다.

function showDiv(id){ 
    var obj = document.getElementById(id), 
     compStyle = window.getComputedStyle(obj); 
    if(compStyle.display == "none") { 
    obj.style.display='block' 
    } else { 
    obj.style.display='none'  
    } 
} 
+0

이것은 나를 위해 작동하지 않습니다. 내 코드에 직접 복사하면 함수가 완전히 작동하지 않습니다. compstyle = 창을 추가 할 때 두 번의 클릭이 필요했습니다. – Tim

+0

@Tim은 저에게 잘 작동합니다 : http://jsfiddle.net/sirko/5fqxjtxm/ – Sirko

+0

그냥 나를 데리고 나와 쏴. 너의 권리. 내 컴파 일할 때 코드를 업로드하지 않아야합니다. 감사! – Tim

0

정의되지 않은 스타일 규칙을 방지하려면 strict equal operators을 사용해야합니다.

차라리 내 코드 청소기를 유지하는 대신에 온 클릭의 또는 addEventListener를 사용하는 것, 여기 내 버전과 jsfiddle (데이터 세트 및 조건 트리플 같은 일부 엑스트라가 있지만, 그들은 반드시 예에 필요하지 않은)

var showDiv = function (ev) { 

    var id = ev.currentTarget.dataset.id; 
    var obj = document.getElementById('show' + id); 

    obj.style.display = (obj.style.display === "none") ? 'block' : 'none'; 
}; 
입니다

http://jsfiddle.net/mindcookin/06nvkay7/4/

관련 문제