Rangeslider.js | Uncaught TypeError: Cannot read property '0' of undefined
Rangeslider.js | Uncaught TypeError: Cannot read property '0' of undefined
我正在尝试使用 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
中被引用:
line 169: this.handleDimension = g(this.$handle[0], "offset" + i(this.DIMENSION)),
line 272: "string" == typeof b && e[b].apply(e, c)
我不确定我造成的是什么类型的错误?
您需要包含 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 中的 用法 部分只是一个脚本展示。所以如果我们直接使用那些脚本,会出现如下错误:
chrome 中的错误消息:
Uncaught TypeError: Cannot read property '0' of undefined
Firefox 中的错误消息:
TypeError: this.$handle is undefined
这件事发生在我身上。在 DOM 呈现之前初始化范围滑块输入的脚本。试试这样写你的脚本标签
<script>
$(function() {
// Code here
});
</script>
我正在尝试使用 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
中被引用:
line 169: this.handleDimension = g(this.$handle[0], "offset" + i(this.DIMENSION)),
line 272: "string" == typeof b && e[b].apply(e, c)
我不确定我造成的是什么类型的错误?
您需要包含 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 中的 用法 部分只是一个脚本展示。所以如果我们直接使用那些脚本,会出现如下错误:
chrome 中的错误消息:
Uncaught TypeError: Cannot read property '0' of undefined
Firefox 中的错误消息:
TypeError: this.$handle is undefined
这件事发生在我身上。在 DOM 呈现之前初始化范围滑块输入的脚本。试试这样写你的脚本标签
<script>
$(function() {
// Code here
});
</script>