堆棧內存溢出
  簡體   English   中英

JSFiddle無法在本地工作

[英]JSFiddle does not work locally

 原文  2014-10-25 13:26:08  6   1    javascript/ jquery/ css/ jsfiddle

問題描述

我在嘗試讓JSFiddle在本地顯示和正常工作時遇到了一些麻煩。 這是小提琴

當我從JSFiddle保存頁面源代碼時，列間距似乎很小，並且JQuery根本不起作用。

如果有人可以幫助我，我將不勝感激！ 非常感謝！ 

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

1 個解決方案

解決方案1
 0 已采納  2014-10-25 13:28:39

在瀏覽器中檢查控制台輸出（例如，Chrome / IE中的F12 ，FireFox中的FireBug）。

盡我最大的努力嘗試用http://ajax.googleapis.com替換//ajax.googleapis.com ; 或下載文件並使用相對路徑引用該文件。

在本地運行時，協議為file://並且//host表示“通過頁面使用的同一協議訪問host ”。

此外href="/css/...是絕對路徑，所以它會尋找你的文件系統的根目錄下的css文件（ / UNIX系統中， C:\\或D:\\ Windows中），可能會導致一個造型問題。

更新資料

我將嘗試簡單地遍歷（就像可以同時處理網絡/文件資源和4種語言/庫一樣簡單）。

我將問題中的代碼復制到D:\\test\\fiddle.html ，並在Chrome中打開它，然后按F12鍵。 更好地了解Chrome開發人員工具 ，無需進行網絡開發就好比用攤刀砍掉一棵已有100年歷史的樹。 基本用法實質上是： 右鍵單擊>檢查元素 。

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

保存頁面后，您修改了上一行。 這是因為您在小提琴中包含了JQuery。 在Frameworks＆Extensions下，將其設置為“ No Library（Pure JS）”，因為您要使用<script>包括JQuery自己。 _這就是jsfiddle的重點，您不必編寫那些乏味的<script>標簽。

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

在“ 小提琴選項”下，取消選中“ 規范化CSS”，因此將不包括該文件。 該文件會更改許多元素的填充和邊距，因此要修復布局，請添加 

ul {
    padding: 0;
}

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

該文件為空，可以忽略。

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

如您所見，它正在嘗試加載不存在的file://... 因此，將您的包含行更改為 

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

未捕獲的ReferenceError：$未定義fiddle.html：92

由於架構錯誤（ // ），因此未包含JQuery的結果。

您還需要將兩個JQuery <script>標記移至$(window).load(腳本$(window).load(之前。

所以這是您的最終文件： 

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

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 iscroll-在jsfiddle中不起作用 似乎無法讓此jsfiddle在本地工作...？ jsfiddle 不適用於 angularjs？ 代碼在jsfiddle外部不起作用 JSFiddle腳本不適用於HTTPS 為什么這個簡單的 JSFiddle 不起作用？ 在 jsfiddle.net 上工作的代碼在本地不起作用 為什么這在jsfiddle中有效，但在我的文檔中卻沒有 為什么我的外部資源在 JSFiddle 中不起作用？ 為什么jQuery在jSfiddle中起作用但在站點中不起作用？
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM