Question

我有这段代码，但是当我移动滑块时发生的一切都是函数会重新启动。我希望函数使用滑块位置的值进行更新。

编辑：这是整个页面：

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <meta name="format-detection" content="telephone=no">
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1,       minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi">
    <title>sliding</title>
    <link rel="stylesheet" href="assets/components/bootstrap/dist/css/bootstrap.min.css"   />
    <link rel="stylesheet" href="assets/components/bootstrap/dist/css/bootstrap-theme.min.css" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js">        </script>

    <script src="assets/js/simple-slider.js"></script>

    <link href="assets/css/simple-slider.css" rel="stylesheet" type="text/css" />
    <link href="assets/css/simple-slider-volume.css" rel="stylesheet" type="text/css" />  
    <script src="assets/js/timbre.js"></script>
    </head>
    <body>
    <div class="app container">

        <!-- start building -->
    <script> 

    var x=200; 
    function sin(){T("sin", {freq:x, mul:0.5}).play();}

    $('#slider').on('change', function(){
    x = $(this).val();
    });


    </script> 

    <button onclick="sin()"></button>

    <input type="text" data-slider="true" data-slider-range="1,000" id="slider">

    </div>
    <script type="text/javascript" src="phonegap.js"></script>
    <script src="assets/components/jquery/jquery.min.js"></script>
    <script src="assets/components/bootstrap/dist/js/bootstrap.min.js"></script>
    <script src="assets/js/index.js"></script>
    </body>
    </html>

Answer 1

根据getting slider values上的jQuery Simple Slider文档，您需要绑定的事件是一个名为slider:changed的自定义事件，而不是标准的DOM change事件。

如果修改

$('#slider').on('change', function(){
    x = $(this).val();
});

到

$('#slider').on('slider:changed', function(evt, data){
    x = data.value;
});

您应该能够将滑块的新值复制到全局变量中。

使用滑块值更新函数中的var

1 个答案: