JSFiddle无法在本地工作

Question

I'm having a bit of trouble trying to get my JSFiddle to display and work properly locally. 我在尝试让JSFiddle在本地显示和正常工作时遇到了一些麻烦。 Here is the fiddle 这是小提琴

When I save the page source from JSFiddle, the spacing of columns seems off and the JQuery does not work at all. 当我从JSFiddle保存页面源代码时，列间距似乎很小，并且JQuery根本不起作用。

If anyone could help me out I would HUGELY appreciate it! 如果有人可以帮助我，我将不胜感激！ Thanks so much! 非常感谢！

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> - jsFiddle demo by kelseyhisek</title>
  <script language="javascript" type="text/javascript" src="jquery.js"></script>
  <link rel="stylesheet" type="text/css" href="/css/normalize.css">
  <link rel="stylesheet" type="text/css" href="/css/result-light.css">
  <style type='text/css'>
    @import url("http://fonts.googleapis.com/css?family=Roboto:400,300,100,400italic,700italic,700");
 .delete {
    position:absolute;
    left:0px;
    top:0px;
    padding-top:20px;
    padding-left:10px;
    height:50px;
    margin-right:10px;
    width:1%;
}
.delete:hover {
    -webkit-transition: width .2s ease-in-out;
    -moz-transition: width .2s ease-in-out;
    -o-transition: width .2s ease-in-out;
    transition: width .2s ease-in-out;
    width:20%;
}
.days {
    display:inline-block;
    text-align:center;
    width:166px;
    margin-top:30px;
    font-family:"Roboto";
    font-weight:400;
    font-size: 15px;
}
ul {
    float:left;
    list-style:none;
    margin-right:10px;
    margin-left:10px;
}
.colcontent {
    width:1000px;
    top:100px;
    height:800px;
    position:absolute;
}
.connectable_list1 {
    /* background:blue;*/
    width:166px;
    margin-bottom:50px;
}
.connectable_list2 {
    /*background:red;*/
    width:800px;
    margin-bottom:50px;
}
.todo {
    clear:both;
}
.asgn {
    font-family:"Roboto";
    font-weight:300;
    font-size: 13px;
    position:relative;
    float:left;
    width:146px;
    height:60px;
    margin-bottom:2px;
    margin-right:20px;
    padding-left:30px;
    padding-top:10px;
    background-color:#E8E8E8;
}
.td {
    position:relative;
    float:left;
    width:146px;
    height:60px;
    margin-bottom:10px;
    padding-top:10px;
    margin-right:10px;
    padding-left:30px;
    background-color:#E8E8E8;
}
  </style>



<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){
$('a').hide();
$(".delete").mouseenter(function () {
    $(this).find('a').show();
});

$(".delete").mouseleave(function () {
    $(this).find('a').hide();
});

$(".connectable_list1").sortable({
    connectWith: '.connectedSortable'
});
$(".connectable_list2").sortable({
    connectWith: '.connectedSortable',
});

$('.delete').click(function () {
    $(this).parent("li").slideUp(200);
});

('.delete').mouseOver(

function () {
    $('a').show();
});
});//]]>  

</script>


</head>
<body>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js"></script>
<div class="headings">
    <ul>
        <li class="days">MONDAY</li>
        <li class="days">TUESDAY</li>
        <li class="days">Wednesday</li>
    </ul>
</div>
<div class="colcontent">
    <ul class="connectable_list1 connectedSortable">
        <li class="asgn"> <span class='delete' style="background-color:blue;"><a href='#'>x</a></span>
Assignment1</li>
        <li class="asgn"><span class='delete' style="background-color:red;"><a href='#'>x</a></span>Assignment2</li>
        <li class="asgn"><span class='delete' style="background-color:green;"><a href='#'>x</a></span>Assignment3</li>
        <li class="asgn"><span class='delete' style="background-color:green;"><a href='#'>x</a></span>Assignment4</li>
    </ul>
    <ul class="connectable_list1 connectedSortable">
        <li class="asgn"><span class='delete'><a href='#'>x</a></span>Assignment1</li>
        <li class="asgn"><span class='delete'><a href='#'>x</a></span>Assignment2</li>
        <li class="asgn"><span class='delete'><a href='#'>x</a></span>Assignment3</li>
        <li class="asgn"><span class='delete'><a href='#'>x</a></span>Assignment4</li>
    </ul>
    <div>
        <div class="todo">
            <ul class="connectable_list2 connectedSortable">
                <li class="td"><span class='delete'>x</span>Todo1</li>
                <li class="td"><span class='delete'>x</span>Todo2</li>
                <li class="td"><span class='delete'>x</span>Todo3</li>
                <li class="td"><span class='delete'>x</span>Todo4</li>
            </ul>
        </div>

</body>


</html>

Answer 1

Check the Console output in your browser (eg F12 in Chrome/IE, FireBug in FireFox). 在浏览器中检查控制台输出（例如，Chrome / IE中的F12 ，FireFox中的FireBug）。

Off the top of my head try replacing //ajax.googleapis.com with http://ajax.googleapis.com ; 尽我最大的努力尝试用http://ajax.googleapis.com替换//ajax.googleapis.com ; or download the file and reference that file with a relative path. 或下载文件并使用相对路径引用该文件。

When you're running locally your protocol is file:// and //host means "access host via the same protocol the page is using". 在本地运行时，协议为file://并且//host表示“通过页面使用的同一协议访问host ”。

Also href="/css/... is absolute path so it'll look for the css file on your file system root ( / in unix, C:\\ or D:\\ in Windows) that can cause a styling issue. 此外href="/css/...是绝对路径，所以它会寻找你的文件系统的根目录下的css文件（ / UNIX系统中， C:\\或D:\\ Windows中），可能会导致一个造型问题。

Update 更新资料

I'll try to walk through simply (as simple as handing network/file resources and 4 languages/libs at the same time can be ;) 我将尝试简单地遍历（就像可以同时处理网络/文件资源和4种语言/库一样简单）。

I copied your code from the question into D:\\test\\fiddle.html and opened it in Chrome, then pressed F12 . 我将问题中的代码复制到D:\\test\\fiddle.html ，并在Chrome中打开它，然后按F12键。 Get better acquainted with Chrome Developer Tools , web development without it is like cutting a 100 year old tree with a spreading knife. 更好地了解Chrome开发人员工具，无需进行网络开发就好比用摊刀砍掉一棵已有100年历史的树。 The basic usage is essentially: Right click > Inspect element . 基本用法实质上是： 右键单击>检查元素 。

GET file:///D:/test/jquery.js net::ERR_FILE_NOT_FOUND fiddle.html:6 GET file：/// D：/test/jquery.js net :: ERR_FILE_NOT_FOUND fiddle.html：6

The above line was modified by you after saving the page. 保存页面后，您修改了上一行。 It's because you included JQuery in the fiddle. 这是因为您在小提琴中包含了JQuery。 Under Frameworks & Extensions set it to "No Library (Pure JS)" since you're including JQuery yourself with <script> . 在Frameworks＆Extensions下，将其设置为“ No Library（Pure JS）”，因为您要使用<script>包括JQuery自己。 _That's the point of jsfiddle, that you don't have to write those tedious <script> tags. _这就是jsfiddle的重点，您不必编写那些乏味的<script>标签。

GET file:///D:/css/normalize.css net::ERR_FILE_NOT_FOUND fiddle.html:7 GET file：/// D：/css/normalize.css net :: ERR_FILE_NOT_FOUND fiddle.html：7

Under Fiddle Options untick the Normalize CSS so this file won't be included. 在“ 小提琴选项”下，取消选中“ 规范化CSS”，因此将不包括该文件。 That file changes paddings and margins for a lot of elements, so to fix your layout add 该文件会更改许多元素的填充和边距，因此要修复布局，请添加

ul {
    padding: 0;
}

GET file:///D:/css/result-light.css net::ERR_FILE_NOT_FOUND fiddle.html:8 GET file：/// D：/css/result-light.css net :: ERR_FILE_NOT_FOUND fiddle.html：8

This file is empty, safe to ignore. 该文件为空，可以忽略。

GET file://ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js net::ERR_FILE_NOT_FOUND fiddle.html:126 GET file：//ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js net :: ERR_FILE_NOT_FOUND fiddle.html：126
GET file://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js net::ERR_FILE_NOT_FOUND fiddle.html:125 GET file：//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js net :: ERR_FILE_NOT_FOUND fiddle.html：125

As you see here it's trying to load file://... which is non-existent. 如您所见，它正在尝试加载不存在的file://... So change your include lines to 因此，将您的包含行更改为

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js"></script>

Uncaught ReferenceError: $ is not defined fiddle.html:92 未捕获的ReferenceError：$未定义fiddle.html：92

Result of JQuery not included because of the schema being wrong ( // ). 由于架构错误（ // ），因此未包含JQuery的结果。

You'll also need to move the two JQuery <script> tags before your $(window).load( script. 您还需要将两个JQuery <script>标记移至$(window).load(脚本$(window).load(之前。

So here's your final file: 所以这是您的最终文件：

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> - jsFiddle demo by kelseyhisek</title>
  <style type='text/css'>
    @import url("http://fonts.googleapis.com/css?family=Roboto:400,300,100,400italic,700italic,700");
 .delete {
    position:absolute;
    left:0px;
    top:0px;
    padding-top:20px;
    padding-left:10px;
    height:50px;
    margin-right:10px;
    width:1%;
}
.delete:hover {
    -webkit-transition: width .2s ease-in-out;
    -moz-transition: width .2s ease-in-out;
    -o-transition: width .2s ease-in-out;
    transition: width .2s ease-in-out;
    width:20%;
}
.days {
    display:inline-block;
    text-align:center;
    width:166px;
    margin-top:30px;
    font-family:"Roboto";
    font-weight:400;
    font-size: 15px;
}
ul {
    float:left;
    list-style:none;
    padding: 0;
    margin-right:10px;
    margin-left:10px;
}
.colcontent {
    width:1000px;
    top:100px;
    height:800px;
    position:absolute;
}
.connectable_list1 {
    /* background:blue;*/
    width:166px;
    margin-bottom:50px;
}
.connectable_list2 {
    /*background:red;*/
    width:800px;
    margin-bottom:50px;
}
.todo {
    clear:both;
}
.asgn {
    font-family:"Roboto";
    font-weight:300;
    font-size: 13px;
    position:relative;
    float:left;
    width:146px;
    height:60px;
    margin-bottom:2px;
    margin-right:20px;
    padding-left:30px;
    padding-top:10px;
    background-color:#E8E8E8;
}
.td {
    position:relative;
    float:left;
    width:146px;
    height:60px;
    margin-bottom:10px;
    padding-top:10px;
    margin-right:10px;
    padding-left:30px;
    background-color:#E8E8E8;
}
  </style>


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js"></script>

<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){
$('a').hide();
$(".delete").mouseenter(function () {
    $(this).find('a').show();
});

$(".delete").mouseleave(function () {
    $(this).find('a').hide();
});

$(".connectable_list1").sortable({
    connectWith: '.connectedSortable'
});
$(".connectable_list2").sortable({
    connectWith: '.connectedSortable',
});

$('.delete').click(function () {
    $(this).parent("li").slideUp(200);
});

('.delete').mouseOver(

function () {
    $('a').show();
});
});//]]>  

</script>


</head>
<body>
<div class="headings">
    <ul>
        <li class="days">MONDAY</li>
        <li class="days">TUESDAY</li>
        <li class="days">Wednesday</li>
    </ul>
</div>
<div class="colcontent">
    <ul class="connectable_list1 connectedSortable">
        <li class="asgn"> <span class='delete' style="background-color:blue;"><a href='#'>x</a></span>
Assignment1</li>
        <li class="asgn"><span class='delete' style="background-color:red;"><a href='#'>x</a></span>Assignment2</li>
        <li class="asgn"><span class='delete' style="background-color:green;"><a href='#'>x</a></span>Assignment3</li>
        <li class="asgn"><span class='delete' style="background-color:green;"><a href='#'>x</a></span>Assignment4</li>
    </ul>
    <ul class="connectable_list1 connectedSortable">
        <li class="asgn"><span class='delete'><a href='#'>x</a></span>Assignment1</li>
        <li class="asgn"><span class='delete'><a href='#'>x</a></span>Assignment2</li>
        <li class="asgn"><span class='delete'><a href='#'>x</a></span>Assignment3</li>
        <li class="asgn"><span class='delete'><a href='#'>x</a></span>Assignment4</li>
    </ul>
    <div>
        <div class="todo">
            <ul class="connectable_list2 connectedSortable">
                <li class="td"><span class='delete'>x</span>Todo1</li>
                <li class="td"><span class='delete'>x</span>Todo2</li>
                <li class="td"><span class='delete'>x</span>Todo3</li>
                <li class="td"><span class='delete'>x</span>Todo4</li>
            </ul>
        </div>

</body>


</html>

JSFiddle无法在本地工作

问题描述

1 个解决方案

解决方案1
0 已采纳 2014-10-25 13:28:39

Update 更新资料

JSFiddle无法在本地工作

问题描述

1 个解决方案

解决方案1 0 已采纳 2014-10-25 13:28:39

Update 更新资料

解决方案1
0 已采纳 2014-10-25 13:28:39