javascript - myFunction未定义

在我的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/