个人中心
gpt4 book ai didi

javascript - JSFiddle 在本地不起作用

转载 作者：太空宇宙 更新时间：2023-11-04 12:45:11 26 4
gpt4 key购买 nike

我在尝试让我的 JSFiddle 在本地正常显示和工作时遇到了一些麻烦。 Here is the fiddle

当我从 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>

最佳答案

检查浏览器中的控制台输出(例如 Chrome/IE 中的 F12，FireFox 中的 FireBug)。

在我脑海中尝试替换 //ajax.googleapis.com与 http://ajax.googleapis.com ;或下载文件并使用相对路径引用该文件。

当您在本地运行时，您的协议(protocol)是 file://和 //host表示“通过页面使用的相同协议(protocol)访问 host”。

还有 href="/css/...是绝对路径，因此它会在您的文件系统根目录(unix 中的 /，Windows 中的 C:\ 或 D:\)上查找可能导致样式问题的 css 文件。

更新

我将尝试简单地介绍(就像同时处理网络/文件资源和 4 种语言/库一样简单；)

我将问题中的代码复制到 D:\test\fiddle.html 中并在 Chrome 中打开它，然后按 F12。更好地了解 Chrome Developer Tools ，没有它的 Web 开发就像用一把展开的刀砍一棵 100 年的老树。基本用法本质上是:右键单击 > 检查元素。

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

以上行是您在保存页面后修改的。这是因为您在 fiddle 中包含了 JQuery。在 Frameworks & Extensions 下将其设置为“No Library (Pure JS)”，因为您自己将 JQuery 包含在 <script> 中. _这就是 jsfiddle 的意义所在，您不必编写那些乏味的 <script>标签。

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

在 Fiddle Options 下，取消选中 Normalize 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>

Uncaught ReferenceError: $ is not defined fiddle.html:92

由于模式错误 (//) 而未包含 JQuery 结果。

您还需要移动两个 JQuery <script> $(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>

关于javascript - JSFiddle 在本地不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26562878/

26 4 0
文章推荐： javascript - 将元素随机放置在一个圆圈中
文章推荐： javascript - Jquery 和 CSS 图像居中在选项卡中不起作用
文章推荐： css - 如何更改 Bootstrap 标签和输入之间的距离
文章推荐： php - 使用 cURL 针对 PHP 进行 C++ 身份验证
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com