Question

在我的计算机C盘上，我创建了一个test.html文件，在其中我有

<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/2.0.5/waypoints.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
    $(document).ready(function() {
        $('#waypoint').waypoint(function() {
            alert('You have scrolled to my waypoint.');
        }, {
            offset: '100%'
        });
    });
</script>

<div id="waypoint">WAYPOINT</div>

我没有收到警告弹出窗口，但JSFIDDLE中的完全相同的代码工作正常。是什么给了什么？

Answer 1

当只需双击.js文件即可打开时，某些浏览器无法加载外部资源（.html文件）。请检查浏览器的网址栏中是否有file://。如果是这样，请在您的计算机上安装XAMPP（或类似的内容，具体取决于您的操作系统），将文件放在htdocs下的某处，然后重试。

此外，JSFiddle将您的代码包装在有效的HTML文档中。您可以将<html><head>...添加到HTML to make it valid。特别是因为您正在处理插件可能需要的视口滚动。

最后要说的是，.js文件的包含顺序很重要，因为它们按顺序加载。由于waypoints依赖于jQuery（因为它是一个jQuery插件），因此需要加载 FIRST 。

为什么航点不起作用？

1 个答案: