jQuery .toggleClass()가 로컬 서버에서 작동하지만 원격 서버에서는 작동하지 않습니다.

Question

도와주세요. 이 코드는 로컬에서 작동하지만 원격 서버에 업로드 한 후에는 작동하지 않습니다. 테스트로 경고문을 입력하기 때문에 cdn 문제가 아닌 것 같습니다. 두 번째 문장은 별도의 페이지를위한 것입니다. 나는 내 HTML 페이지의 맨 아래에있는 자바 스크립트 파일에 대한 링크가있는 cdn을 통해 jQuery를 참조하고있다. 어떤 도움이라도 대단히 감사하겠습니다. 페이지의 URL 여기

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
<script>window.jQuery || document.write('<script src="javascript/jquery-1.8.2.min.js"> <\/script>')</script> 
<script type="text/javascript" src="javascript/artwork.js"></script> 

됩니다 : 여기

$(document).ready(function() { 
    $('.thmb').hover(function() { 
     var x = $('.thmb').index(this); 
     $('.info_art').eq(x).toggleClass("hover-animation"); 
    }); 
    $('.thmbs_pdg_div a').click(function (evt) { 
     evt.preventDefault(); 
     var divname = this.name; 
     $("#" + divname).show().siblings().hide(); 
    }); 
}); 

내가 HTML 페이지의 끝에 추가하는 코드입니다 http://www.kipdeeds.com/artwork_page.html

하지 않은 페이지에 대한 몇 가지 추가 정보 작업 : 7 가지 범주가 있으며 각 범주의 텍스트는 스프라이트 (예 : "종이", "새로운 예술"등)입니다. 한 사람이 그 위치를 가리키면 화살표 아이콘이있는 텍스트의 새로운 이미지가 나타나야합니다. 필자가 작성한 프로그램은 해당 이미지 아이콘이 텍스트를 표시하는 스프라이트에 동일한 효과를 적용 할 수있게합니다.

현재 의견 (아이디어보다 나은 아이디어)을 얻을 때까지 코드를 변경하지 않습니다.

Answer 1

JS가 정상입니다.

문제는 CSS와 이미지의 불일치입니다. 여기있는 거 CSS의 :

a.art_paper { 
    background: url("../assets/artwork_page/on_paper.gif") repeat scroll 0 0 transparent; 
    display: block; 
    height: 20px; 
    margin-top: 33px; 
    width: 95px; 
} 

a:hover, #artwork_main_div .hover-animation { 
    background-position: 0 -100px; 
} 

그녀가 이미지의 : (95px X 20 픽셀)

당신은 무한히 높은 20 픽셀 될 일이 당신의 배경 이미지를 반복합니다. .hover-animation 클래스가 활성화되면 100px까지 백그라운드를 슬라이딩하여 이미지의 세로 반복을 5 번 (100/20 = 5) 반복합니다. 원본과 정확하게 같습니다.