在我的scriptfile.js
中,我布置了一个简单的文本调整大小功能。该功能本身可以按预期工作。但是,当我尝试将$(window).resize(fitheadliner());
添加到我的脚本文件中以在resize事件上触发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 );
最佳答案
这不是一个范围界定的问题。更像是资格问题。
该行执行时
$(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 );
关于javascript - myFunction未定义,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/30471282/