是什么导致我的“未捕获类型错误：无法读取未定义的属性 'toLowerCase'”错误？答案

【问题标题】：What is causing my "Uncaught TypeError: Cannot read property 'toLowerCase' of undefined" error?是什么导致我的“未捕获类型错误：无法读取未定义的属性 'toLowerCase'”错误？
【发布时间】：2016-02-01 06:47:42
【问题描述】：

仅供参考，我已经阅读了相关线程Uncaught TypeError: Cannot read property 'toLowerCase' of undefined 并尝试实现这个想法。不过，我得到了经典的

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

错误，我不知道它来自代码中的哪一行，因为 jQuery 中的错误点。我的代码是

    ReadinessColorSetter = (function () {

        this.ColorToRange = {
            '#f65314': [0, 30],
            '#ffbb00': [31, 70],
            '#7cbb00': [70, 100]
        }

        this.SetReadiness = function (ipt) {
            // ipt: input element containing
            var val = $(this).val(),
                newcolor = "#FFF"; // default
            for (var hexcode in this.ColorToRange) {
                var range = this.ColorToRange[hexcode];
                if (val >= range[0] && val < range[1]) {
                    newcolor = hexcode;
                    break;
                }
            }
            $(ipt).parent().children().last().css('background-color', newcolor);
        }

        return this;
    })();

    // On page load, set the color of the readiness       
    $(function () {
        $('input[class="completeness"]').each(function (el) {
            ReadinessColorSetter.SetReadiness(this);
        });
    });

    // When the readiness value is changed, set the color of the readiness
    //$('input[class="completeness"]').change(function () {
        //ReadinessColorSetter.SetReadiness(this);
    //});
    $(document).on('change', $('input[class="completeness"]'), function (el) {
        ReadinessColorSetter.SetReadiness($(el.target));
    });

    $('#change-submitted').click(function () {
        alert('Change submitter clicked'); // TEST
    });

如您所见，我已经注释掉了我认为的问题并尝试实施正确的修复。

关于这个问题的任何指导？

【问题讨论】：

你能看到 jQuery 中有什么错误吗？什么时候出现错误？
@KeiranTai 出现在 pg 加载
这应该是$(ipt).val()吗？在这里查看：this.SetReadiness = function (ipt) {...var val = $(this).val(),
我不确定，但我认为 SetReadiness(this) 应该是 SetReadiness($(this));在我的一个函数中，我有一个“每个”调用，我总是做“var obj = $(this);”然后只使用“obj”，因为我一直忘记何时只使用“this”以及何时使用“$(this)”。我相信这就是“未定义”所指的。
@KeiranTai 是的。我的错。让我检查一下是否可以解决问题...

标签： javascript jquery dom

【解决方案1】：

这似乎是无效的：

 $(document).on('change', $('input[class="completeness"]'), function (el) {
 //-----------------------^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^----it should be a string

如您所见，您已经传递了一个 jquery 对象，而在描述中您应该看到它需要一个 css 选择器字符串，例如：

 $(document).on('change', 'input.completeness', function (el) {

在方法中：

var val = $(ipt).val(),

if 条件应该是：

if (val >= range[0] && val <= range[1]) {
    newcolor = hexcode;//--^^----------------should be less than equal instead
    break;
}

【讨论】：

所以您仍然在说“class=...”字符串，但它是一个对象，而不仅仅是一个字符串？有趣的！ :-)

【解决方案2】：

看着：

 // On page load, set the color of the readiness       
$(function () {
    $('input[class="completeness"]').each(function (el) {
        ReadinessColorSetter.SetReadiness(this);
    });
});

$.each() 闭包具有 [index,elements] 的参数，您正在将展开的元素发送到您的 SetReadiness 函数，您应该改为执行以下操作：

(function () {
    $('input[class="completeness"]').each(function (index, elem) {
        ReadinessColorSetter.SetReadiness(elem);
    });
})();

您的代码中还有另一个错误，您在 jQuery 元素对象中多次包装元素，这导致两种不同类型的对象被发送到您的 SetReadiness 函数，在一种情况下是标准元素对象和 jQuery 元素另一种情况下的对象。

将您的函数输入规范化为标准元素对象或 jQuery 元素对象，这样做可以消除混乱的代码，即。

    this.SetReadiness = function (ipt) {
        // ipt: element pre wrapped inside of a jQuery object.

        var val = ipt.val(),
            newcolor = "#FFF"; // default
        for (var hexcode in this.ColorToRange) {
            var range = this.ColorToRange[hexcode];
            if (val >= range[0] && val < range[1]) {
                newcolor = hexcode;
                break;
            }
        }
        ipt.parent().children().last().css('background-color', newcolor);
    }

留给您一个将纯 jQuery 元素对象作为参数的函数，或者您可以发送标准元素对象，然后将其包装在 SetReadiness 函数内的 jQuery 元素对象中。

希望这可以解决您遇到的一些问题，每当您收到未定义的错误时，请始终检查您是否在 $(object) 中包装了有效的对象。

像这样标准化所有内容将清除您的错误，并为您提供干净易读的代码。我没有查看您的代码的功能，只专注于清除您未定义的错误。

【讨论】：