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

10-12 03:03