Question

当我在谷歌浏览器上打开html文件时。这只是一个空白页面。什么都没有加载。如果我取出.js文件，它会加载应用了.css的内容，但从不加载.js文件。我是否将.js文件放在它或它的末尾仍然没有显示任何内容。我正在使用jquery btw并下载了该文件。所有文件都在同一个文件夹中。如果它有所作为，还尝试了jquery-3.3.1.min.js和jquery-migrate-1.4.1.js。希望有人可以提供帮助。谢谢！

HTML：

<!DOCTYPE html>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="testing.css">
</head>
<body>
<div id="products">
  <h1 class="ui-widget-header">Blocks</h1>
  <div class="ui-widget-content">
    <ul>
      <li data-id="1" class="credit"> 10000$ </li>
      <li data-id="2" class="debit"> -10000$ </li>
      <li data-id="3" class="credit"> 10000$ </li>
      <li data-id="4" class="credit"> -10000$ </li>
      <li data-id="5" class="credit"> Bank </li>
      <li data-id="6" class="debit"> Loan </li>
    </ul>
  </div>
</div>

<div id="shoppingCart1" class="shoppingCart">
  <h1 class="ui-widget-header">Credit Side</h1>
  <div class="ui-widget-content">
    <ol>
      <li class="placeholder">Add your items here</li>
    </ol>
  </div>
</div>
<div id="shoppingCart2" class="shoppingCart">
  <h1 class="ui-widget-header">Debit side</h1>
  <div class="ui-widget-content">
    <ol>
      <li class="placeholder">Add your items here</li>
    </ol>
  </div>
</div>


<script type="text/javascript" src="jquery-migrate-1.4.1.js"></script>
<script type="text/javascript" src="testing.js"></script>


</body>
</html>

.JS

$("#products li").draggable({
  appendTo: "body",
  helper: "clone"
});
$("#shoppingCart1 ol").droppable({
  activeClass: "ui-state-default",
  hoverClass: "ui-state-hover",
  accept: ".credit",
  drop: function(event, ui) {
    var self = $(this);
    self.find(".placeholder").remove();
    var productid = ui.draggable.attr("data-id");
    if (self.find("[data-id=" + productid + "]").length) return;
    $("<li></li>", {
      "text": ui.draggable.text(),
      "data-id": productid
    }).appendTo(this);
    // To remove item from other shopping cart do this
    var cartid = self.closest('.shoppingCart').attr('id');
    $(".shoppingCart:not(#" + cartid + ") [data-id=" + productid + "]").remove();
  }
}).sortable({
  items: "li:not(.placeholder)",
  sort: function() {
    $(this).removeClass("ui-state-default");
  }
});
// Second cart
$("#shoppingCart2 ol").droppable({
  activeClass: "ui-state-default",
  hoverClass: "ui-state-hover",
  accept: ".debit",
  drop: function(event, ui) {
    var self = $(this);
    self.find(".placeholder").remove();
    var productid = ui.draggable.attr("data-id");
    if (self.find("[data-id=" + productid + "]").length) return;
    $("<li></li>", {
      "text": ui.draggable.text(),
      "data-id": productid
    }).appendTo(this);
    // To remove item from other shopping chart do this
    var cartid = self.closest('.shoppingCart').attr('id');
    $(".shoppingCart:not(#" + cartid + ") [data-id=" + productid + "]").remove();
  }
}).sortable({
  items: "li:not(.placeholder)",
  sort: function() {
    $(this).removeClass("ui-state-default");
  }
});

.CSS

h1 { padding: .2em; margin: 0; }
#products { float:left; width:200px; height: 600px; margin-right: 20px; }
#products ul {list-style: disc; padding: 1em 0 1em 3em;}
.shoppingCart{ width: 200px; margin: 20px; float: left; }
.shoppingCart ol { margin: 0; padding: 1em 0 1em 3em; list-style-type: decimal;  }

Answer 1

使用

<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>

因为jquery-migrate不包含整个jquery代码。当然，您可以包含本地脚本。

Answer 2

的问题：

您的HTML文件没有指向jquery和jquery UI的CDN链接。他们需要相同的顺序。首先，您需要jquery CDN和第二个jquery UI cdn
您在testing.js文件中使用了jquery，但是您没有document.ready函数。

解决方案： 1.为jquery和jquery UI添加cdn链接 2.将您的javascript代码包装在document.ready函数中。这是MDN document

Solution

Jquery文件未在浏览器上加载

2 个答案: