我正在尝试使用 roundslider plugin .
我按照说明找到了 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 提供的示例。
最佳答案
问题是在加载 HTML 之前调用脚本。结果，$("#slider1")是未定义的，该函数什么也没有被调用。
或者:
- 将您的脚本移动到
<body>的末尾或<div>之后的某个地方 将整个 JS 代码包装在
$(function() {})中等待页面加载的包装器，如下所示:$(function() { $("#slider1").roundSlider({ sliderType: "default", value: 40 }); });
JSFiddle 示例工作的原因是代码被包装在 window.load() 中函数，它等待 HTML 加载。 (您可以在设置 JavaScript > 加载类型下看到此设置)。
在内部，这是他们的脚本(您可以检查开发人员工具以在 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 插件默认设置，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38576782/