Rangeslider.js |未捕获的类型错误:无法读取未定义的属性“0”

Posted

技术标签:

【中文标题】Rangeslider.js |未捕获的类型错误:无法读取未定义的属性“0”【英文标题】:Rangeslider.js | Uncaught TypeError: Cannot read property '0' of undefined 【发布时间】:2016-10-15 23:16:57 【问题描述】:

我正在尝试使用 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)

我不确定自己会导致什么类型的错误?

【问题讨论】:

运气好吗?我得到了完全相同的错误 同样的问题,好像是更新功能 我遇到了同样的问题,没有解决办法 调用destroy后,重新初始化然后更新,destroy会移除你的范围滑块,所以之后你应该无法更新 试试 $('input[type="range"]').rangeSlider().rangeslider('update', true); 【参考方案1】:

你需要包含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 中的错误消息:

未捕获的类型错误:无法读取未定义的属性“0”

Firefox 中的错误消息:

TypeError: this.$handle 未定义

【讨论】:

【参考方案2】:

这发生在我身上。初始化范围滑块输入的脚本在 DOM 呈现之前被初始化。尝试像这样编写脚本标签

<script>
$(function() 
    // Code here
);
</script>

【讨论】:

以上是关于Rangeslider.js |未捕获的类型错误:无法读取未定义的属性“0”的主要内容,如果未能解决你的问题,请参考以下文章

未捕获的类型错误:无法读取未定义的属性“区域”?

未捕获的类型错误未定义不是函数

未捕获的类型错误:无法读取未定义的属性 toLowerCase

JQuery:未捕获的类型错误:无法读取未定义的属性“调用”

未捕获的类型错误:无法读取文本字段上未定义错误的属性“toLowerCase”

未捕获的类型错误:数据表