为什么当我尝试在浏览器中加载滑块时出现错误显示?

Question

我已经将代码保存在slider.js中。但是在浏览器中，滑块不起作用。显示错误

Uncaught ReferenceError: $ is not defined.

但是我在这里看到$(document).ready(...)处理程序中console.log("ready")的结果:

Jquery代码

$( document ).ready(function() {
console.log('ready'); // <===== I'm seeing this
$('.logo-carousel').slick({
slidesToShow: 6,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 1000,
arrows: true,
dots: false,
pauseOnHover: false,
responsive: [{
breakpoint: 768,
settings: {
slidesToShow: 4
}
}, {
breakpoint: 520,
settings: {
slidesToShow: 2
}
}]
});
});

误差

Uncaught ReferenceError: $ is not defined
at Slider.js:1:3

Answer 1

假设您所展示的代码是全局作用域，我只能想到三种可能性:

1. 在包含jQuery和你在问题中显示的代码之前，你已经包含了Sliders.js。

2. 你正在使用iframe和加载Slider.js到它，但jQuery没有加载在iframe;你的代码是在主文档(或不同的iframe)，其中jQuery是加载，所以它有$，但iframe与Slider.js没有。记住，iframe与包含它的窗口是完全不同的窗口。如果你想在iframe中使用jQuery，你必须在iframe中加载它。

3. (这似乎不太可能)代码在之后运行你的代码是这样做的:

   $.noConflict(); // This part is optional but likely to be there
   delete $;       // This causes the specific error you're seeing
   

#1是最可能的情况，其次是#2;#3是可能的，但不太可能。

我不会做#2的例子，因为它与堆栈片段很尴尬，但这里有一个#1的例子:

<script><!-- This is Slider.js -->
$(document).on("click", ".slider", function() {
// ...
});
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(() => {
console.log("ready");
});
</script>

下面是#3的一个例子:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(() => {
console.log("ready1");
});
</script>
<script>
$.noConflict(); // This is optional but likely to be there
delete $;       // This causes the specific error you're seeing
</script>
<script>
$(document).ready(() => {
console.log("ready2");
});
</script>

注意，我们看到ready1，但得到一个错误，而不是看到ready2。

如果你的代码后面的代码只有做$.noConflict()，你仍然会得到一个错误，但它将是一个不同的("$不是一个函数)。所以有些东西实际上是从窗口对象中删除$属性(通过delete $或类似的)。

---

旁注:$(document).ready(someFunction)已经被弃用一段时间了，详细信息在这里。使用$(someFunction)代替，如果你真的需要让jQuery等待DOMContentLoaded事件，或者更好的是使用模块(他们不会运行，直到HTML的主要解析完成)，或defer在你的script标签，或把你的script标签在文档的最后。(但有时你不能控制script标签，在这些情况下，$(someFunction)可能是有用的。)