jQuery .toggleClass（）在本地工作，但不在远程服务器上

Question

请帮忙。此代码在本地工作，但不会在将其上载到远程服务器后进行。它似乎不是一个CDN问题，因为我把一个警报声明作为一个测试。第二种说法是针对一个单独的页面，它在那里工作。我在我的html页面的底部通过cdn引用了jQuery，并在其下方有一个指向我的JavaScript文件的链接。任何帮助将不胜感激。

$(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页面的末尾添加代码：

<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> 

这里是页面的网址：http://www.kipdeeds.com/artwork_page.html

关于网页一些额外的信息，是不是工作：有七个类别，每个类别的文本都是精灵（例如“在纸上”，“新艺术”等）。当一个人徘徊的位置应该移动显示一个箭头图标的文字的新形象。我正在编写的程序将允许相应的图像图标在显示文本的精灵中制定相同的效果。

现在我不会改变代码，直到我得到反馈（比我的想法更好）。

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）垂直迭代...，看起来与原始图像完全相同。