1 컨테이너에서 2 divs + 2 다른 컨테이너에서 동시에 전환

검색 방법을 잘 모르겠습니다. 갤러리 페이지에서 이미지를 원래 크기와 2x 사이를 토글하려면 또한 상태를 변경하는 다른 컨테이너의 줌 버튼을 클릭하여 (이미지 div 현재 상태와 일치하여 확대 또는 축소 할 수 있음을 나타냄)1 컨테이너에서 2 divs + 2 다른 컨테이너에서 동시에 전환

클릭하거나 단추를 클릭하여 이미지를 전환 한 경우 버튼을 어떻게 토글할지는 모르겠다.

감사합니다.

출처

2013-03-01 Rene Alejandro Hernandez

코드를 포함 할 수 있습니까? 그리고/또는 당신이 시도한 것 –

나는 이전에 발견 한 코드를 편집했고, 내가 원하는 효과를 얻고 있습니다! 나는이 솔루션이 얼마나 좋은지 잘 모르겠다. 개선 제안은 시원할 것이다. 그래도 기분이 좋다. [http://jsfiddle.net/Qb9rS/1/](http://jsfiddle.net/Qb9rS/1/) –

jquery toggleClass()을 사용할 수 있습니다. 예를 들어 http://jsbin.com/uhiguv/1/edit

hasClass을 사용하면 요소를 구체적으로 타겟팅 할 수 있습니다. 예 : http://jsbin.com/uhiguv/2/edit

<!DOCTYPE html> 
<html> 
<head> 
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
<meta charset=utf-8 /> 
<title>JS Bin</title> 
<style> 
    .image.active{width:64;height:64;} 
    .active{border:2px solid black;} 
</style> 
</head> 
<body> 

    Click the image or the button<br><br> 

    <img 
    class="ctrl image" 
    src="http://www.gravatar.com/avatar/f9dc5de7822b1679d7133691ec616174?s=32&d=identicon&r=PG"> 

    <br><button class="ctrl button">Grow</button> 

<script> 
    jQuery(function(){ 

    $('.ctrl').bind('click', function(){ 

     $('.ctrl').toggleClass('active'); 

     if ($('.ctrl.button').hasClass('active')) { 
     $('.ctrl.button').text('Shrink'); 
     } 
     else { 
     $('.ctrl.button').text('Grow'); 
     } 

    }); 

    }); 

</script> 
</body> 
</html>

출처

2013-03-01 18:41:06

좋아요! 이게 내가 원하는 것인데 어떻게이 버튼을 이미지로 사용할 수 있을까? –

css'.button.active {background-image : url ('/ img/shring.jpg')'와'.button {background-image : url ('/ img/grow.jpg')' –

1 컨테이너에서 2 divs + 2 다른 컨테이너에서 동시에 전환

답변

관련 문제