特定功能的参考错误

Question

我正在使用js代码来应用阴影。当我的按钮背景颜色为白色时，它不会应用任何框阴影。但我的一个功能是未捕获的参考错误。

我的js文件是

var btnDefault = $(".btn");
btnDefault.each(function(index, elem) {

    var btnDefaultbgColor = $(this).css('backgroundColor');
    hexConvert(btnDefaultbgColor);
    if (color === '#ffffff' || color === '#fff') {
        $(this).css({
            'box-shadow': 'none'
        });
    };
});

和我的hexConvert函数是

function hexConvert(colorval) {
    var parts = colorval.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
    if (!parts) {
        return null;
    }
    delete(parts[0]);
    for (var i = 1; i <= 3; ++i) {
        parts[i] = parseInt(parts[i]).toString(16);
        if (parts[i].length == 1) parts[i] = '0' + parts[i];
    }
    color = '#' + parts.join('');
}

background:transperent可能存在问题（我不理解：/）。 但是当背景为白色时，它也会显示相同的错误

我该如何解决？

Answer 1

我在你的代码中看到了很多潜在的问题。并非所有这些都与您询问的具体症状有关，但是现在或将来它们可能会引起其他问题。

首先，要将颜色值转换为十六进制格式，请仅为其副作用调用hexConvert函数。该函数不返回任何值（至少在大多数情况下，除非它返回null - 见下文），而是设置一个全局color变量，然后由代码的其他部分读取。

然后，使用稀疏数组parts删除第一个元素，然后连接其元素以形成最终值。

您在null函数中返回hexConvert但在函数调用后从未测试其返回值。

如果您在hexConvert中没有匹配，则返回null，但您仍然将之前的值保留在color全局变量中 - 这将在调用后使用每次正则表达式不匹配时，在代码的其余部分中hexConvert - 除非它是第一次调用此函数，在这种情况下color将是未定义的，或者可能还有其他值设置为代码的其他部分。

您认为颜色的格式为rgb(r, g, b)，如果是这样，为什么不直接将其与rgb(255, 255, 255)进行比较以检查它是否为白色？

您没有说明您实际得到的错误以及在哪一行中，并且看到您的代码中存在多少其他可能的问题，很难给您更精确的答案。

请在JS Bin，JSFiddle或CodePen中发布一个有效的示例。

Answer 2

这是一个我从前段时间转换为rgb到hex的函数...我希望它比你的更好：

var RgbToHex = function (string) {
    if( /rgba?\(0,0,0,0\)/.test(string.replace(new RegExp(' ', 'g'), '')) ){
        return "transparent";
    }
    var v = string.replace(/[rgb|ba()]/g, "").split(",");
    var hex0 = parseInt(v[0]).toString(16);
    var hex1 = parseInt(v[1]).toString(16);
    var hex2 = parseInt(v[2]).toString(16);
    return ('#' + (hex0.length == 1 ? "0" + hex0 : hex0).toString() + (hex1.length == 1 ? "0" + hex1 : hex1).toString() + (hex2.length == 1 ? "0" + hex2 : hex2).toString()).toLocaleUpperCase();
}

Check the jsFiddle