javascript - 为什么我的 java 脚本在 jsFiddle 中可以完美运行，但在任何浏览器中都不能？

Question

请帮我！被卡了很长时间。我在我的 html 文件中编写了完全相同的代码，但它根本不起作用。

我在 HEAD 部分下插入了 javascript。

这是我的小提琴

的HTML：

<div id="content">

<div id="colone">

     <div id="introbox" class="test">
     </div>


     <div id="infobox" class="test">
     <div style="border-bottom:1px solid #666;width:160px;margin-top:20px;margin-left:20px; font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#666;">
    INFO
    </div>
    </div>
</div>    

<div id="coltwo">

     <div id="aboutbox" class="test">
    <div style="border-bottom:1px solid #666;width:250px;margin-top:20px;margin-left:20px; font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#666;">
    ABOUT
    </div>
    </div>


     <div id="gallerybox" class="test">
     <div style="border-bottom:1px solid #666;width:260px;margin-top:20px;margin-left:20px; font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#666;">
    GALLERY
    </div>

     </div>
</div>    


<div id="colthree">

     <div id="contactbox" class="test">
     <div style="border-bottom:1px solid #666;width:180px;margin-top:20px;margin-left:20px; font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#666;">
    CONTACT US
    </div>

    </div>


     <div id="extrabox" class="test">
     <div style="border-bottom:1px solid #666;width:160px;margin-top:20px;margin-left:20px; font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#666;">
    EXTRAS
    </div>

     </div>
</div>
     ​

JavaScript：

$(document).ready(function() {
    $(".test").hover(function() {
    $(".test").not($(this)).css({
        "opacity": 0.1
    });
}, function() {
    $(".test").css({
        "opacity": 1
    });
});
});​

Answer 1

这里只有三个可能性

该脚本应放置在网页的标题部分，因为它被称为onload

其次是 jQuery 库版本，它在 jsfiddle 上是 1.7.2，所以要么你的 jQuery 版本太旧，要么你根本没有使用这个库

第三是你必须缺少<script></script>标签，因为 jsfiddle 不需要它

Answer 2

最可能的原因是脚本需要在 DOM 准备好后执行，这是 jsfiddle 确保的。

如果您提供指向小提琴的链接，那就太好了。

Answer 3

听起来您没有在标题中包含 JQuery。添加以下内容：

<script src="jquery_js_goes_here"></script>

我会抓住最新的，看看使用可用的cdn（或谷歌的cdn）例如

<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>

希望有帮助。