Question

我在jsfiddle上有一个代码，它工作正常，但是当我复制所有内容并将其放在记事本上然后在浏览器上运行时，它不起作用

$('.bxslider').bxSlider({
    nextSelector: '#slider-next',
    prevSelector: '#slider-prev',
    infiniteLoop: false,
    nextText: 'Next &nbsp;-&nbsp; I am done!',
    prevText: 'I need to go back'
});

以下是fiddle

Answer 1

您需要将脚本包含在$(function(){})中，以便在浏览器中使用

试试这个：

$(function(){
    $('.bxslider').bxSlider({
        nextSelector: '#slider-next',
        prevSelector: '#slider-prev',
        infiniteLoop: false,
        nextText: 'Next &nbsp;-&nbsp; I am done!',
        prevText: 'I need to go back'
    });
});

Fiddle为您添加$(function(){})或$(document.ready()());包装。然而，在浏览器中，我们需要明确地添加它，因此问题。

Answer 2

jsFiddle为您附加jQuery库，并将代码包装在document.ready事件中 - 请参阅左侧的面板。复制代码时，您必须自己执行此操作。

所以，包括jQuery库。您可以将脚本放在页面底部（就在关闭BODY标记之前），而不是使用document.ready事件。

注意：$（function（）{相当于document.ready。

Answer 3

您是否在HTML文档中引用了jQuery库？这需要位于包含jQuery的每个页面的顶部。

将它放在文档的<head>标签中（实际上，它可以在文档中的任何位置，但它必须在jQuery代码之前）：

<head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>

jQuery代码既可以存储在外部文件中，也可以像上面的jQuery库一样引用，也可以在脚本标记之间包含在本文档中，如下所示：

<script>
    $(function(){
        $('.bxslider').bxSlider({
            nextSelector: '#slider-next',
            prevSelector: '#slider-prev',
            infiniteLoop: false,
            nextText: 'Next &nbsp;-&nbsp; I am done!',
            prevText: 'I need to go back'
        });
    });
</script>

Answer 4

<强> Working jsFiddle Demo

尝试将<script>标记用于初始化bxSlider之后 jQuery和你的插件，还等待文档准备好了：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://bxslider.com/lib/jquery.bxslider.min.js"></script>
<link href="http://bxslider.com/lib/jquery.bxslider.css" rel="stylesheet" />
<script>
    $(function () {
        $('.bxslider').bxSlider({
            nextSelector: '#slider-next',
            prevSelector: '#slider-prev',
            infiniteLoop: false,
            nextText: 'Next &nbsp;-&nbsp; I am done!',
            prevText: 'I need to go back'
        });
    });
</script>

jquery代码在jsfiddle中工作但不在浏览器中工作

4 个答案: