javascript - 类型错误 : "Not a function" using "this" keyword in a function

Question

我创建了以下函数。

function showAllSelectOpts(select)
{
  selectLength = select.children().length;
  select.attr('size',selectLength);
  select.css('height','auto');
  select.focusout(function(){
      select.attr('size','1');
  });
}

当像这样 showAllSelectOpts(mySelect); 这样的选择元素上直接调用它时它工作正常，但是当在另一个函数中调用时，如下使用关键字“this”，它返回错误. 类型错误:select.children 不是函数

$('select').on('focus',function(){
  showAllSelectOpts(this);
})  

这是范围问题还是什么，我该如何解决？

Answer 1

在事件处理程序中，this 是对 DOM 元素的引用，而不是 jQuery 对象。但是您的 showAllSelectOpts 期望它的参数是一个 jQuery 对象。

要么更改调用以使用 $() 包装 DOM 元素:

showAllSelectOpts($(this));

...或更新showAllSelectOpts以自行执行此操作:

function showAllSelectOpts(select)
{
  select = $(select);                      // ***
  selectLength = select.children().length;
  select.attr('size',selectLength);
  select.css('height','auto');
  select.focusout(function(){
      select.attr('size','1');
  });
}

---

旁注:A.Wolff points out ，您的函数将新 focusout 处理程序附加到选择每次 调用。你只想要一个。

我会完全删除处理程序的那部分，并用单个 focusout 替换它:

function showAllSelectOpts(select)
{
  var selectLength = select.children().length;
  select.attr('size',selectLength);
  select.css('height','auto');
}
$('select')
  .on('focus',function(){
    showAllSelectOpts($(this));
  })
  .on('focusout', function(){
    $(this).attr('size', '1');
  });

另请注意，我在 showAllSelectOpts 中为 selectLength 添加了一个 var(尽管实际上，您可以完全删除该变量)；没有一个，代码就会成为 The Horror of Implicit Globals 的牺牲品。 (那是我贫血的小博客上的帖子)。请务必声明您的变量。