jQuery 版本升级问题：TypeError: $(...).slider is not a function答案

【问题标题】：jQuery Version Upgrade Issues: TypeError: $(...).slider is not a functionjQuery 版本升级问题：TypeError: $(...).slider is not a function
【发布时间】：2018-09-20 12:48:25
【问题描述】：

我将我的 jQuery 版本从 2.1.1 升级到 3.3.1。

版本迁移后，我看不到我的滑块功能正常工作。

我已经包含了 jquery.min.js 和 jquery-ui.min.js。

如果我遗漏了什么，请告诉我。

错误指向的代码sn-p：

    var slider = $(elem).slider({
        range: "min",
        value: scope.config.mapValues.indexOf(scope.bandwidth),
        min: scope.config.min,
        step: scope.config.step,
        max: scope.config.mapValues.length-1,
        disabled: scope.disabledFlag,
        slide: function(event, ui) {
            if(ui.value > scope.maxLimit){
                return false;
            }
            scope.$apply(function() {
                scope.slideValue = scope.config.mapValues[ui.value];
            });
        },
        stop: function( event, ui ) {
            if(scope.bandwidth > scope.maxLimit){
                scope._resetBandWidth();
                scope.$apply(function() {
                    var currentValue = scope.config.mapValues[scope.maxLimit];
                    if(ui.value <= scope.maxLimit) {
                        currentValue = scope.config.mapValues[ui.value];
                    }
                    scope.bandwidth = currentValue;
                    scope.slideValue = currentValue;
                });
                return false;
            }
            scope.$apply(function() {
                var bandwidthValue = scope.config.mapValues[ui.value];
                scope.bandwidth = bandwidthValue;
                scope.slideValue = bandwidthValue;
            });
        }
    }).append(disableDiv);

下图显示了我在控制台中看到的错误。

jQuery-UI - “Cannot read property 'step' of undefined” error image

【问题讨论】：

你确定你的 jquery 和 jquery-ui 已经加载了吗？你能在控制台中看到它们吗？还有你的元素是什么？
请提供更多信息和错误所在行，然后添加完整错误。
请记住，浏览器具有开发人员模式，这可能有助于查看有关您所看到的错误的更多详细信息，并且还允许您将值注入页面以进行调试。
在添加 jQuery-UI 之后检查您是否不小心包含了另一个 jQuery 副本。这通常是缺少插件的原因
我只包含了一份 JQuery 和 JQuery UI。我已经包含了 Jquery-3.3.1 的精简版本。

标签： javascript jquery easing

【解决方案1】：

嗨@Suhasini Venkatesh，

可能是缩小 JS 的问题。
而不是使用jquery.min.js 使用jquery-3.3.1.js 和你的jquery-ui.min.js。

<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js" integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30=" crossorigin="anonymous"></script>

编辑：

Slim 显然删除了jQuery UI 中所需的一些功能。要解决此问题，请使用完整版的 jQuery。更多详情见this

希望这对你有用。如果没有在 cmets 中告诉我。

【讨论】：

嗨，谢谢，但包含未压缩版本会破坏整个应用程序 UI。我已经包含了 jQuery slim 版本。我希望这会破坏我的滑块功能并出现错误“滑块不是功能”，但是如果我包含正常的 js 文件（不是苗条但缩小），则会破坏下拉悬停突出显示功能（所有可用选项一次突出显示）错误“w.easing 不是函数”。
@Suhasini Venkatesh，我更新了我的答案。检查它，看看它对你有没有帮助。
我尝试使用完整版的 jQuery，如前所述，它破坏了下拉悬停突出显示功能（所有可用选项同时突出显示），错误“w.easing 不是函数”。