Question

我尝试在我的应用中加入一个圆形滑块。我下载了文件并尝试实现它们，但滑块不会出现。他似乎没有在某处发生错误。

 <html>

<head>
<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
<link rel="stylesheet" href="css/circular-slider.min.css">

<script type="text/javascript" src="js/jquery-2.1.0.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<script type="text/javascript" src="js/circular-slider.min.js"></script>

<script>
    var circularSlider = $('#slider').CircularSlider({
        min : 0,
        max: 359,
        value : 10,
        labelSuffix: "°",
        slide : function(value) {
            ui.next().css({'background' : 'linear-gradient(' + value +
            'deg, white, cornsilk, white)'});
        }
    });
</script>
</head>


 <body>
 <main>
  <div id="slider"></div> //this is where it should appear
 </main>
</body>
</html>

Answer 1

这是因为$('#slider')在通话时是undefined。将整个脚本包装在document.ready callback中，或者在<script>标记结尾之前移动</body>标记。

这应该有效：

<script>
    // Wait for the DOM to be ready so the `#slider` element exists at the time of the call
    $(function() {
        var circularSlider = $('#slider').CircularSlider({
            min : 0,
            max: 359,
            value : 10,
            labelSuffix: "°",
            slide : function(ui, value) {
                ui.next().css({'background' : 'linear-gradient(' + value +
                'deg, white, cornsilk, white)'});
            }
    });
</script>

<强> LE 这个： slide : function(value) 应该这样： slide: function(ui, value)。

我的圆形滑块没有显示

1 个答案: