Question

我按照找到here的说明，包含依赖文件，添加HTML并调用插件。

我在以下简单的.html文件中创建了所有这些内容，然后使用chrome打开它。

<html>
    <head>
        <script src="https://cdn.jsdelivr.net/jquery/1.11.3/jquery.min.js"></script>
        <link href="https://cdn.jsdelivr.net/jquery.roundslider/1.3/roundslider.min.css" rel="stylesheet" />
        <script src="https://cdn.jsdelivr.net/jquery.roundslider/1.3/roundslider.min.js"></script>
        <script type="text/javascript">
            $("#slider1").roundSlider({
                sliderType: "default",
                value: 40
            });
        </script>
    </head>
    <body>
        <div id="slider1" class="rslider"></div>
    </body>
</html>

Chrome打开了该页面，但在div中没有显示任何内容。我哪里出错了？

jsfiddle示例由roundslider提供。

Answer 1

问题是在加载HTML之前调用脚本。结果，$("#slider1")未定义，函数被调用。

或者：

将您的脚本移至<body>或<div>

将整个JS代码包装在$(function() {})包装器中，等待页面加载，如下所示：

$(function() {
    $("#slider1").roundSlider({
        sliderType: "default",
        value: 40
    });
});

JSFiddle示例的工作原因是因为代码包含在window.load()函数中，该函数等待加载HTML。（您可以在JavaScript＆gt;加载类型设置下看到此设置。

在内部，这是他们的脚本（你可以查看开发人员工具以在JSFiddle中看到这个）：

//<![CDATA[
$(window).load(function(){
$("#slider1").roundSlider({
    sliderType: "default",
    value: 40
});

$("#slider2").roundSlider({
    sliderType: "min-range",
    value: 40
});

$("#slider3").roundSlider({
    sliderType: "range",
    value: "10,40"
});
});//]]>

JavaScript roundslider插件默认设置

1 个答案: