2013-09-26 4 views
0

div에서 클릭시 여러 div의 불투명도를 토글하려고합니다. 누군가가 내가 잘못 여기거야 곳으로 올바른 방향으로 날 지점 수 있다면 , 그 :)다른 div를 클릭 할 때 div의 불투명도 전환

function toggle_opacity(className) { 
    var x = document.getElementsByClassName(className); 
    if(x.style.opacity == '0') 
     x.style.opacity = '1'; 
    else 
     x.style.opacity = '0'; 
} 

답변

1

getElementsByClassName 배열을 반환 큰, 그래서 루프에서 코드를 감싸는 것 :

function toggle_opacity(className) { 
    var x = document.getElementsByClassName(className); 
    for(i = 0; i < x.length; i++){ 
     if(x[i].style.opacity == '0') 
      x[i].style.opacity = '1'; 
     else 
      x[i].style.opacity = '0'; 
    } 
} 
0

Your JSFiddle에는 3 가지 문제가 있습니다. 불투명도가 0하지 '0' 경우

var x = document.getElementsByClassName(className)[0]; 

2) if 요구 사항이 확인 : 첫 번째 요소를 선택해야하므로, 배열을 반환 document.getElementsByClassName(className)

1).

3) 귀하의 JS는 <head>하지 onLoad에 있어야합니다.

여기는 updated JSFiddle입니다.

0

는 변경 사항으로 Fiddle 업데이트 한 :

나는 귀하의 요구 사항에 맞게 기능을 변경했습니다.

e1[0].style.opacity = '1'; 
e1[1].style.opacity = '0'; 

이 두 줄을 추가했습니다.

0

는 내가 JQuery와

html--

<div id="div_1" class="ope"> 
</div> 
<div id="div_2" class="ope"> 
</div> 
<div id="div_3" class="ope"> 
</div> 

CSS ---

.ope{ 
    width:200px; 
    height:100px; 
    background-color:pink; 
    margin-bottom:4px; 
    cursor:pointer; 
} 

jquery--

$(document).ready(function(){ 
    $(".ope").click(function(){ 
     var thisdiv = $(this).attr('id'); 
     //alert(thisdiv); 
     $(".ope").css('opacity','1'); 
     $("#"+thisdiv).css('opacity','0.5'); 

    }) 
}) 
+0

[링크 수행이 을 할 수 있습니다 ] http://jsfiddle.net/Ronjon/kNpj7/ – Ronjon

관련 문제