用滑动条值更新var in函数

Updating var in function with slider value

本文关键字：var in 函数 更新      更新时间：2023-09-26

我有这段代码，但是当我移动滑块时所发生的一切都是函数将重新启动。我想让函数更新滑块位置的值。

编辑:这是整个页面:

    <!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>

根据获取滑块值的jQuery Simple Slider文档，你需要绑定的事件是一个名为slider:changed的自定义事件，而不是标准的DOM change事件。

如果修改

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


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

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

相关文章：