Question

你可以告诉我为什么滑块在jquery中不起作用？我看到这个演示，但它的回调功能不火？为什么？

这是我的代码

<!DOCTYPE html>
<html>

<head>
    <script data-require="jquery@*" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
</head>

<body>
    <h1>Hello Plunker!</h1>
    <input type="range" min="10"
           max="1000"
           step="10"
           value="300" />
    <script>
        $(function () {
            console.log('====')
            $('input[type="range"]').rangeslider({
                // Feature detection the default is `true`.
                // Set this to `false` if you want to use
                // the polyfill also in Browsers which support
                // the native <input type="range"> element.
                polyfill: true,

                // Callback function
                onInit: function () {
                    console.log('init')
                },

                // Callback function
                onSlide: function (position, value) { },

                // Callback function
                onSlideEnd: function (position, value) {
                    console.log(value)
                }
            });
        })
    </script>
</body>
</html>

这是我的代码 https://plnkr.co/edit/cbh60dJcvHhAoqDlLo9g?p=preview

回调函数不开火为什么？当我滑动滑块

时

Answer 1

从您的示例中，您是否正在为Range Slider加载JS和CSS文件尚不清楚，因此这可能是问题的一部分。

此外，如果您希望默认显示，则需要将polyfill: true,更改为polyfill: false,。

$(function () {
    $('input[type="range"]').rangeslider({
        polyfill: false,

        onInit: function() {
            console.log('init')
        },

        // Callback function
        onSlide: function(position, value) {},

        // Callback function
        onSlideEnd: function(position, value) {
            console.log(value)

        }
    });
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/rangeslider.js/2.3.2/rangeslider.min.js"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/rangeslider.js/2.3.2/rangeslider.min.css">

<h1>Hello Plunker!</h1>
<input type="range" min="10"
    max="1000"
    step="10"
    value="300"
/>

为什么滑块不能在jquery中工作？

1 个答案: