2012-07-10 4 views
2

안녕하세요. 나는 또한 여기에서 볼 수있는 다음 코드를 가지고있다. http://designliving.tk/test.html "View 360"을 클릭하면 <div>과 Text가 바뀐다.jQuery를 두 번 클릭해야합니다.

"이 이미지입니다"를 클릭하면 다시 "보기 360"으로 재설정해야합니다.

유일한 문제는 "이 이미지입니다"를 클릭하면 "보기 360"을 두 번 클릭해야 DIV가 다시 변경됩니다.

처음 클릭 할 때 변경되어야합니다. 내 코드를 아무런 성공없이 정리하려고 시도했다.

<!DOCTYPE html> 
<html> 
    <head> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
<script> 
    $(document).ready(function(){ 
    $('#toggleDiv').toggle(function() { 
     $('#imgThree').show(); 
     $('#imgNorm').hide(); 
     $(this).html('<a href="#">View Normal</a>'); 
    }, function() { 
     $('#imgThree').hide(); 
     $('#imgNorm').show(); 
     $(this).html('<a href="#">View 360</a>'); 
    }); 
    $('#changeDiv').click(function() { 
     $('#imgThree').hide(); 
     $('#imgNorm').show(); 
     $('#toggleDiv').html('<a href="#">View 360</a>'); 
    }); 
    }); 
</script> 

<style type="text/css"> 
    #imgThree { 
    display: none; 
    } 
</style> 
    </head> 
    <body> 
<div id="toggleDiv"><a href="#">View 360</a></div> 
<br> 
<br> 
<div id="imgNorm">Normal Product Image Here</div> 
<div id="imgThree">360 Spin Image Here</div> 
<br> 
<br> 
<div id="changeDiv"> 
<a href="#">This is an image</a><br> 
<a href="#">This is an image</a><br> 
<a href="#">This is an image</a> 
</div> 
    </body> 
</html> 

도움 주셔서 감사합니다.

+2

그것은 때문에'토글()의 사용의이다'... –

+0

당신은 아마도 내가 코드를 조정해야 할 방법으로 도움이 되거 수 있을까요? – BirdQuestions

답변

1
$(document).ready(function(){ 
    hide = function(){ 
     $('#imgThree').hide(); 
     $('#imgNorm').show(); 
     $('#toggleDiv').html('<a href="#">View 360</a>'); 
    } 
    $('#toggleDiv').toggle(function() { 
     $('#imgThree').show(); 
     $('#imgNorm').hide(); 
     $(this).html('<a href="#">View Normal</a>'); 
    }, hide); 
    $('#changeDiv').click(function(){ 
     if($('#imgThree:hidden').length > 0){ 
      $('#toggleDiv').trigger('click'); 
     } 
    }); 
    });​ 

http://jsfiddle.net/HV39C/

+0

또 하나 좋은 설명 : [여기] (http://stackoverflow.com/a/244468/1422309) – Stano

관련 문제