我的jQuery代码不能在本地系统中工作,但在jsFiddle中工作

时间:2013-12-21 09:34:27

标签: javascript jquery html css

以下代码在JSFiddle http://jsfiddle.net/z5ey2/中正常工作,但不能在本地工作。代码如下。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
            <title>Untitled Document</title>
            <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
            <script type="text/javascript">
                $( "#OVERALL_VALUE" ).click(function() {
                    $( "#ajaxload_more3" ).show("slow");
                    $("#ajaxload_more3").delay(6000).fadeOut("slow");
                });
                $( "#PRICE" ).click(function() {
                    $( "#ajaxload_more3" ).show("slow");
                    $("#ajaxload_more3").delay(6000).fadeOut("slow");
                });
                $( "#QUALITY" ).click(function() {
                    $( "#ajaxload_more3" ).show("slow");
                    $("#ajaxload_more3").delay(6000).fadeOut("slow");
                });
                $( "#list" ).click(function() {
                    $( "#ajaxload_more3" ).show("slow");
                    $("#ajaxload_more3").delay(6000).fadeOut("slow");
                });
                $( "#grid" ).click(function() {
                    $( "#ajaxload_more3" ).show("slow");
                    $("#ajaxload_more3").delay(6000).fadeOut("slow");
                });
                $( "#map" ).click(function() {
                    $( "#ajaxload_more3" ).show("slow");
                    $("#ajaxload_more3").delay(6000).fadeOut("slow");
                });
            </script>
        </head>

        <body>
            <ul class="tabset">
                <li><a id="OVERALL_VALUE" href="javascript:void(0)" onclick="setTopDeals('OVERALL_VALUE')" class="topdeal">Top Deals</a></li>
                <li><a id="PRICE" href="javascript:void(0)" onclick="setTopDeals('PRICE')" class="price">Price</a></li>
                <li><a id="QUALITY" href="javascript:void(0)" onclick="setTopDeals('QUALITY')" class="quality">Star Rating</a></li>
                <li><a id="list" href="javascript:void(0)" class="list">List View</a></li>
                <li><a id="grid" href="javascript:void(0)" class="gallery">Gallery</a></li>
                <li><a id="map" href="javascript:void(0)" class="map">Map View</a></li>
            </ul>
            <a id="ajaxload_more3" style="display:none; width:200px; height:80px; border:1px solid #000; opacity:0.8; border-radius:10px; padding-top:20px; padding-bottom:25px; position:fixed; top:50%; left:50%; z-index:1000; text-align:center; background-color:#997CE6;"><table align="center"><tr height="50"><td><img src="images/ajaxload.gif" height="50" width="50" /></td></tr><tr height="35"><td><span style="font-size:20px; color:#FFF;">Loading</span></td></tr></table></a>
        </body>
    </html>

2 个答案:

答案 0 :(得分:0)

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

你的.js文件中缺少http ..

答案 1 :(得分:0)

你在给https:之前的说法没有用,但是在给出protocol.Iissing协议应该不是问题,一旦检查this

您可能在代码中更改了其他协议,因此它对您有用。更好的做法是检查JavaScritp控制台是否存在错误,而不是盲目编码。

修改

来自Felix Kling的评论,如果您从文件系统加载文档,则必须提供协议,如果您从Web服务器加载文档,则无需提供协议。感谢Felix指出这个说明。