Question

在我的scriptfile.js中我布置了一个简单的文本重新调整大小的功能。就其本身而言，该功能按预期工作。但是，当我尝试将$(window).resize(fitheadliner());添加到我的脚本文件以触发resize事件上的fitheadliner()函数时，它会得到一个＆＃34;未捕获的ReferenceError：未定义fitheadliner＆＃34;错误。我已经在脚本文件周围移动了resize函数，认为它可能是一个范围问题无济于事。以下是文件的内容：

( 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 );

Answer 1

下面：

$.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 没有每个方法。我不明白你是如何看到其他错误（或错误行为）的。也许这个应该用选择器代替：

$(<selector>).each(...);

Answer 2

这不是一个范围问题。更像是资格问题。

此行执行时

$(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 );

myFunction未定义

2 个答案: