JQuery 滑块未显示在把手中

Question

我是 Handlebars/Jquery 的新手，一直在尝试测试这个 https://jsfiddle.net/aLr8q3nf/

当我尝试使用普通 HTML show/hide 滑块时它工作正常，但是当我尝试使用 .hbs/node.JS 测试相同的功能时，JS 不适用于我。当我单击按钮时，正在调用函数（通过显示警报进行验证；）但它不会 show/hide 滑块对我来说不确定我做错了什么。

有人可以指导我在哪里看吗？

这是我的Style.css

       #box {
  display: none;
      top: 50px;
    left: 50px;
}

这是我的index.hbs

<html>

<script src="jquery-1.11.3.min.js"></script>
<link href="roundslider.min.css" rel="stylesheet" />
<script src="roundslider.min.js"></script>

<script type="text/javascript">
    showBox = function () {
        $('#box').toggle();
        alert("Test");


    }
        $('#slider').roundSlider({
            sliderType: "min-range",
            value: 23,

            svgMode: true,
            rangeColor: "#03a9f4",
            pathColor: "#ececec",
            borderWidth: 0,

            editableTooltip: false,
            handleShape: "dot",
            radius: 120,
            width: 15
        });
    
</script>

<form>
    <div id="box">
        <div id="slider"></div>
    </div>

    <button onclick="showBox();">Click</button>
</form>

Answer 1

以防有人寻求帮助只是移动了下面的功能并且它起作用了。

<br><br>
<button onclick="showBox()">Click</button>

<script type="text/javascript">
     
window.showBox = function () {
    $("#box").toggle();
}


$("#slider1").roundSlider({
    sliderType: "min-range",
    value: 23,
    
    svgMode: true,
    rangeColor: "#03a9f4",
    pathColor: "#ececec",
    borderWidth: 0,
    
   editableTooltip: false,
  handleShape: "dot",
  radius: 20,
  width: 5,
});
    </script>

JQuery 滑块未显示在把手中

JQuery Slider is not Showing in Handlebars

javascript

jquery

node.js

handlebars.js