myFunction 未定义
在我的
scriptfile.js
中,我布局了一个简单的文本调整大小函数。该函数本身按预期工作。但是,当我尝试将
$(window).resize(fitheadliner());
添加到我的脚本文件以在调整大小事件上触发
fitheadliner()
函数时,它收到“Uncaught ReferenceError:fitheadliner 未定义”错误。我已将调整大小函数移到脚本文件中,认为这可能是范围问题,但无济于事。以下是文件的内容:
( function( $ ) {
$.fn.fitheadliner = function() {
this.each(function() {
var
$headline = $(this),
$parent = $headline.parent();
var
textW = $headline.width(),
parentW = $parent.width(),
ratio = parentW / textW;
var
originalSize = parseFloat($headline.css('font-size')),
newSize = originalSize * (0.9 * ratio);
$headline.css("font-size", newSize);
});
};
$(window).resize(fitheadliner());
} )( jQuery );
此处:
$.fn.fitheadliner = …
fitheadliner 被定义为 $.fn 的属性。
但此处:
$(window).resize(fitheadliner());
您正尝试将其作为变量访问(并调用它)。请考虑:
(function($) {
function fitheadliner() {
...
}
// Assign a reference, don't call the function
$(window).resize(fitheadliner);
}(jQuery));
但是,您还有另一个问题:
this.each(function() {
该函数以 window 作为 this 调用,而 window 没有 each 方法。我不明白您为什么没有看到其他错误(或错误行为)。也许应该用选择器替换 this :
$(<selector>).each(...);
这不完全是范围问题。更像是资格问题。
当执行此行时
$(window).resize(fitheadliner());
您说的是,运行
$(window)
,然后运行 ​​
fitheadliner()
,然后运行第一个调用的返回值的
.resize
方法,将第一个函数调用的返回值传递给它。
很容易认为您调用
fitheadliner()
的方式会将其绑定到
$
对象,但事实并非如此。没有理由这样做。每个表达式都单独求值,然后适当链接。
因此,此表达式在范围中查找名为
fitheadliner
的符号,该符号必须是
function
类型。范围中没有具有该名称的符号。但是,有一个名为
$.fn.fitheadliner
的符号。
要解决此错误,您需要 完全限定 引用,例如
$(window).resize($.fn.fitheadliner());
但事实是,我也不认为这完全是您想要的。
.resize
接受处理程序函数。
fitheadliner
不返回函数,也不返回任何内容。它实际上做了一些工作。所以我认为您想要做的是将
引用
传递给
fitheadliner
以进行
resize
。
这很简单 - 去掉括号。
$(window).resize($.fn.fitheadliner);
现在,甚至更好,可能没有理由将
fitheadliner
附加到 jQuery 原型。试试这个。它可能更接近于您想要做的事情。
( function( $ ) {
function fitheadliner() {
this.each(function() {
var
$parent = $(this).parent(),
$headline = $(this);
var
textW = $(this).width(),
parentW = $parent.width(),
ratio = parentW / textW;
var
originalSize = parseFloat($(this).css('font-size')),
newSize = originalSize * (0.9 * ratio);
$(this).css("font-size", newSize);
});
}
$(window).resize(fitheadliner);
} )( jQuery );
这在名为
fitheadliner
的范围内定义了一个函数,然后将对它的引用传递给
resize
。
就我个人而言,我会更进一步,匿名内联该函数,因为它不需要重复使用。但对我来说,这只是形式/偏好的问题。语义上没有区别。
( function( $ ) {
$(window).resize(function fitheadliner() {
this.each(function() {
var
$parent = $(this).parent(),
$headline = $(this);
var
textW = $(this).width(),
parentW = $parent.width(),
ratio = parentW / textW;
var
originalSize = parseFloat($(this).css('font-size')),
newSize = originalSize * (0.9 * ratio);
$(this).css("font-size", newSize);
});
});
} )( jQuery );