jQuery 토글 스위치 이미지

Question

jQuery의 토글을 이해하지 못하는 상황이 있습니다.

둘 다 동일한 콘텐츠를 열고 두 버튼 중 하나를 클릭하면 콘텐츠가 열리거나 닫히고 속성에 따라 버튼이 열림에서 닫힘으로 바뀝니다. (따라서 두 버튼 모두 동일한 기능을 수행합니다).

상단 버튼을 클릭하면 내 콘텐츠가 열리고 하단 버튼을 클릭하여 이미지 속성이 잘못 전환됩니다.

여기 내 코드가 어떻게 생겼는지에 대한 아주 잘린 버전이 있습니다. (하지만이에 국한되지있어 보통 2) n 사이

<script language="javascript" type="text/javascript"> 
    $(function() { 

     var open = false; 

     $("#button1, #button2").toggle(
      function() { 
       open = true; 
       $("#button1").attr("src", "images/btn-open.gif"); 
       $("#button2").attr("src", "images/btn-open.gif"); 
      }, 
      function() { 
       if (open) { 
        $("#button1").attr("src", "images/btn-closed.gif"); 
        $("#button2").attr("src", "images/btn-closed.gif"); 

       } else { 
        $("#button1").attr("src", "images/btn-open.gif"); 
        $("#button2").attr("src", "images/btn-open.gif"); 

       } 
       open = false; 

      } 
     ); 


    }); 
</script> 

<img id="button1" src="images/btn-open.gif"></img> 
<br /> 
<br /> 
<br /> 
<br /> 
<img id="button2" src="images/btn-open.gif"></img> 

Answer 1

.toggle() 의지주기는 요소 당 각각 클릭 에 기능을 제공하지만 모두 버튼 하나 토글하지 indepdently 전환 하나 하나를 원하는 그래서,이 같은 검사를하고 .click()을 사용 : 그것은 비록 같은 효과입니다,

var open = false; 
$("#button1, #button2").click(function() { 
    open = !open; //toggle it 
    $("#button1, #button2") //set the src based on the new state 
    .attr("src", "images/btn-" + (open ? "open" : "closed") + ".gif"); 
}); 

나는 또한 combined your selectors 그것을 비트 깔끔한 만들기를 :) 아니에요 확실히 100 % 이미지 이름에서 당신 때문에 필요할지도 모른다 부울을 바꿔 가려하지만 아이디어를 얻을 수 있습니다.