我正在尝试使用rangeslider.js
这是我的HTML包括:
<script type="text/javascript" src="jquery/jquery-3.0.0.min.js"></script> <script type="text/javascript" src="rangeslider.js-2.1.1/rangeslider.min.js"></script>这是我的HTML:
<input type="range" min="0.0" max="1.0" step="0.05" value="0.8" data-rangeslider="" style="position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0;"> <script> // Initialize a new plugin instance for all // e.g. $('input[type="range"]') elements. $('input[type="range"]').rangeslider(); // Destroy all plugin instances created from the // e.g. $('input[type="range"]') elements. $('input[type="range"]').rangeslider('destroy'); // Update all rangeslider instances for all // e.g. $('input[type="range"]') elements. // Usefull if you changed some attributes e.g. `min` or `max` etc. $('input[type="range"]').rangeslider('update', true); </script>我得到这个错误:
Uncaught TypeError: Cannot read property '0' of undefined.这些是在rangeslider.min.js中引用的rangeslider.min.js :
line 169: this.handleDimension = g(this.$handle[0], "offset" + i(this.DIMENSION)), line 272: "string" == typeof b && e[b].apply(e, c)我不确定我正在造成什么类型的错误?
I'm trying to use rangeslider.js
This is my HTML includes:
<script type="text/javascript" src="jquery/jquery-3.0.0.min.js"></script> <script type="text/javascript" src="rangeslider.js-2.1.1/rangeslider.min.js"></script>This is my HTML:
<input type="range" min="0.0" max="1.0" step="0.05" value="0.8" data-rangeslider="" style="position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0;"> <script> // Initialize a new plugin instance for all // e.g. $('input[type="range"]') elements. $('input[type="range"]').rangeslider(); // Destroy all plugin instances created from the // e.g. $('input[type="range"]') elements. $('input[type="range"]').rangeslider('destroy'); // Update all rangeslider instances for all // e.g. $('input[type="range"]') elements. // Usefull if you changed some attributes e.g. `min` or `max` etc. $('input[type="range"]').rangeslider('update', true); </script>I am getting this error:
Uncaught TypeError: Cannot read property '0' of undefined.These are the lines that appear to be being referencing to in rangeslider.min.js:
line 169: this.handleDimension = g(this.$handle[0], "offset" + i(this.DIMENSION)), line 272: "string" == typeof b && e[b].apply(e, c)I am unsure as to what type error I am causing?
最满意答案
您需要包含rangeslider.js的css文件,并且您不应该销毁rangeslider。
举个最简单的例子:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/rangeslider.js/2.3.2/rangeslider.css"> </head> <body> <input type="range" min="10" max="1000" step="10" value="300"> <script src="https://code.jquery.com/jquery-3.0.0.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/rangeslider.js/2.3.2/rangeslider.js"></script> <script> $('input[type="range"]').rangeslider({polyfill: false}); </script> </body> </html>上面的例子基于rangeslider.js中的代码。
我认为rangeslider.js中的Usage部分只是一个脚本展示。 所以如果我们直接使用这些脚本,会发生以下错误:
Chrome中的错误消息:
Uncaught TypeError:无法读取未定义的属性'0'
Firefox中的错误消息:
TypeError:这个。$ handle是未定义的
You need to include the css file of rangeslider.js, and you shouldn't destroy the rangeslider.
For a minimun example:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/rangeslider.js/2.3.2/rangeslider.css"> </head> <body> <input type="range" min="10" max="1000" step="10" value="300"> <script src="https://code.jquery.com/jquery-3.0.0.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/rangeslider.js/2.3.2/rangeslider.js"></script> <script> $('input[type="range"]').rangeslider({polyfill: false}); </script> </body> </html>The example above is based on the code in rangeslider.js.
I think the Usage section in rangeslider.js is just a script showcase. So if we directly use those scripts, the following errors occurs:
Error message in chrome:
Uncaught TypeError: Cannot read property '0' of undefined
Error message in Firefox:
TypeError: this.$handle is undefined
更多推荐
发布评论