javascript - Jquery:TypeError:文本未定义

Question

我有一些代码片段可以“破解”一些我无法正常修复的模板代码。

<script>
jQuery( document ).ready(function() {
    jQuery(".avatar").each(function() {
        var text = jQuery(this).attr("src");
        text = text.replace("-64x64.jpg", ".jpg");
        text = text.replace("-80x80.jpg", ".jpg");
        text = text.replace("-32x32.jpg", ".jpg");
        text = text.replace("-28x28.jpg", ".jpg");
        text = text.replace("-16x16.jpg", ".jpg");
        text = text.replace("-128x128.jpg", ".jpg");
        jQuery(this).attr("src", text);
    });
});
</script>

在浏览器中触发上述脚本后，我在控制台中收到以下错误:

TypeError: text is undefined
text = text.replace("-64x64.jpg", ".jpg");

绞尽脑汁却一无所获。尝试使用 var 文本；尝试在脚本的开头定义它，并尝试使用不同的变量名，以防它与两者都没有做的事情发生冲突....

Answer 1

这意味着至少有一个类为 avatar 的元素没有 src 属性。 attr 如果相关元素根本没有该属性，则返回 undefined。

你可以在 (if (text)) 中放置一个守卫。这是一个例子。另请注意，使用 jQuery(this).attr("src") 的理由为零；只需使用 this.src:

jQuery( document ).ready(function() {
    jQuery(".avatar").each(function() {
        if (this.src) {
          this.src = this.src.replace("-64x64.jpg", ".jpg")
                             .replace("-80x80.jpg", ".jpg")
                             .replace("-32x32.jpg", ".jpg")
                             .replace("-28x28.jpg", ".jpg")
                             .replace("-16x16.jpg", ".jpg")
                             .replace("-128x128.jpg", ".jpg");
        }
    });
});

您还可以使用正则表达式使该代码更加健壮:

jQuery( document ).ready(function() {
    jQuery(".avatar").each(function() {
        if (this.src) {
          this.src = this.src.replace(/-(\d+x\d+)\.jpg$/, ".jpg");
        }
    });
});

这会将 -DIGITSxDIGITS.jpg 替换为 .jpg，但没有具体说明每种情况下的数字是什么。 \d表示“任意数字”，后面的+表示“一个或多个”。