내 jQuery 토글 클래스가 작동하지 않는 이유는 무엇입니까?

Question

저는 jQuery에 대해 거의 익숙하지 않아 이미지를 100 % 확대 할 때 클릭하면 문제가 발생합니다. 나는 여러 번에 걸쳐 코드의 작은 부분을 살펴봤을 때 그것이 어땠을 것 같아 보입니다.

$(document).ready(function() { 
    $('img.gallery').click(function() { 
     $(this).toggleClass('enlarge'); 
    }); 
}); 

CSS의 :

img.gallery { 
     border: 1px solid #aaaaaa; 
     width: 260px; 
     height: 260px; 
    } 

    .enlarge { 
     width: auto; 
    } 

내가 제대로 라이브러리 및 스크립트에 연결하고있는 jQuery를 여기입니까?

<link rel="stylesheet" type="text/css" href="style.css"> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
    <script type="text/javascript" src="script.js"></script> 
    <script type="text/javascript" src="gallery.js"></script> 

위의 미리보기없이 전체 CSS는 여기에 있습니다 : 나는 CSS에서 뭔가 클릭에 확대에서 이미지를 유지하는 경우 (내 jQuery를가 정확 가정) 궁금하네요 http://ruzzio.net/style.css

.

사전 도움을 주셔서 감사합니다. 이 사이트를 처음 사용하는 경우입니다. 중요한 정보를 잊어 버리면 사과드립니다.

Answer 1

img.gallery가 높은 특이성 이상을 가지고 볼 수 있습니다 .enlarge (0011 대 0010) 따라서 더 중요한 것으로 간주됩니다.

img 태그 이름을 삭제 해보세요. CSS 선택자는 필요한만큼 간단해야합니다.

Answer 2

당신은 CSS에서 설정 한 바로 폭에 대해 잘 모르는 경우 다음을 시도하지 왜

: 토글 잘 작동하는 경우

.enlarge { 
     width: auto; 
     border: 1px solid red; 
    } 

당신이 ;-)

Answer 3

auto은 크기가 커지지 않기 때문에. auto 값은 간단히 말해서 요소를 컨테이너로 확장하지 않고 요소의 크기를 자동으로 계산하고 설정합니다. 이미지가 컨테이너 내부에 Asuming, 시도 :

img.gallery { 
     border: 1px solid #aaaaaa; 
     width: 260px; 
     height: 260px; 
    } 

    .gallery.enlarge { 
     width: 100%; 
     height: auto; 
    } 

여기에 직접보기 : http://jsfiddle.net/gfW3g/1/

편집 : 추가 예를 들어 고정 CSS를 특이