Javascript 类型错误："；“不是一个函数”；使用；这"；函数中的关键字_Javascript_Jquery_This

Javascript 类型错误："；“不是一个函数”；使用；这"；函数中的关键字

javascript jquery

Javascript 类型错误："；“不是一个函数”；使用；这"；函数中的关键字,javascript,jquery,this,Javascript,Jquery,This,我创建了以下函数 function showAllSelectOpts(select) { selectLength = select.children().length; select.attr('size',selectLength); select.css('height','auto'); select.focusout(function(){ select.attr('size','1'); }); } 直接在如下所示的select元素上调用它时sho

我创建了以下函数

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

直接在如下所示的select元素上调用它时

showAllSelectOpts（mySelect）它工作正常，但是当在另一个函数中调用时，如下面使用关键字“this”时，它返回错误类型错误：选择。子项不是函数
$('select').on('focus',function(){
  showAllSelectOpts(this);
})  

这是一个范围问题还是什么，我如何解决它？
尝试以下方法：
var myselect  = $('select');

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

更好的方法是：
$('select').on('focus',function(event){
  showAllSelectOpts($(event.target));
})  

为什么您的代码不工作？
$('select').on('focus',function(){
  //Here `this` is bound with the dom html element, not the $('select') object.
  showAllSelectOpts(this);
})  

试试这个：
var myselect  = $('select');

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

更好的方法是：
$('select').on('focus',function(event){
  showAllSelectOpts($(event.target));
})  

为什么您的代码不工作？
$('select').on('focus',function(){
  //Here `this` is bound with the dom html element, not the $('select') object.
  showAllSelectOpts(this);
})  

在事件处理程序中，这是对DOM元素的引用，而不是jQuery对象。但是您的showAllSelectOpts
希望它的参数是jQuery对象
将调用更改为使用$（）
包装DOM元素：
…或更新显示所有选择选项
自行执行此操作：
function showAllSelectOpts(select)
{
  select = $(select);                      // ***
  selectLength = select.children().length;
  select.attr('size',selectLength);
  select.css('height','auto');
  select.focusout(function(){
      select.attr('size','1');
  });
}


旁注：作为.Wolff，每次调用select时，您的函数都会将一个new
focusout

处理程序附加到select。你只想要一个
我将完全删除处理程序的该部分，并将其替换为单个
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
（尽管实际上，您可以完全删除该变量）；如果没有一个，代码就会沦为牺牲品（这是我贫血的小博客上的一篇文章）。确保声明变量。
在事件处理程序中，
这是对DOM元素的引用，而不是jQuery对象。但是您的showAllSelectOpts 希望它的参数是jQuery对象将调用更改为使用$（）包装DOM元素： …或更新显示所有选择选项自行执行此操作： function showAllSelectOpts(select) { select = $(select); // *** selectLength = select.children().length; select.attr('size',selectLength); select.css('height','auto'); select.focusout(function(){ select.attr('size','1'); }); } 旁注：作为.Wolff，每次调用select时，您的函数都会将一个new
focusout处理程序附加到select。你只想要一个
我将完全删除处理程序的该部分，并将其替换为单个
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
（尽管实际上，您可以完全删除该变量）；如果没有一个，代码就会沦为牺牲品（这是我贫血的小博客上的一篇文章）。一定要声明变量。
试试这个-

$('select').on('focus',function() { showAllSelectOpts($(this)); })
试试这个-

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

jQuery事件侦听器回调将
此设置为触发事件的HTMLElement 在回调中，您需要一个jQuery对象，但您有HtmleElement 您可以将HTMLElement传递给jQuery构造函数，并将其传递到showAllSelectOpts 函数中 $('select').on('focus',function(){ showAllSelectOpts($(this)); }) jQuery事件侦听器回调将此设置为触发事件的HTMLElement 在回调中，您需要一个jQuery对象，但您有HtmleElement 您可以将HTMLElement传递给jQuery构造函数，并将其传递到showAllSelectOpts 函数中 $('select').on('focus',function(){ showAllSelectOpts($(this)); }) 这些先前的答案解决了这个问题。我只是在这里添加它作为扩展，因为$（this）引用了一个方法调用的原型 $.fn.showAllSelectOpts=function() { $(this).on('focus',()=>{ $(this) .css('height','auto') .attr('size',$(this).children().length) .focusout(()=>{ $(this).attr('size','1'); }); }); }; $('select').showAllSelectOpts(); 这些先前的答案解决了这个问题。我只是在这里添加它作为扩展，因为$（this）引用了一个方法调用的原型 $.fn.showAllSelectOpts=function() { $(this).on('focus',()=>{ $(this) .css('height','auto') .attr('size',$(this).children().length) .focusout(()=>{ $(this).attr('size','1'); }); }); }; $('select').showAllSelectOpts(); 事件处理程序中的this 是触发focus 事件的DOM元素，而不是jQuery对象事件处理程序中的this 是触发focus 事件而不是jQuery对象的DOM元素。这不会起作用，因为显然我只想在任何html“选择”时运行该函数元素接收焦点。除此之外，var myselect=$（'select'）将包括页面上的所有select元素。”更好的方法是：“这与OP的代码有着完全相同的问题：它试图在DOM元素上使用jQuery函数。@T.J.Crowder是的，你是对的。我更新了我的代码！谢谢！这是行不通的，因为很明显，我只想在任何html“select”元素收到焦点时运行该函数。除此之外，var myselect=$（'select'）将包括页面上的所有select元素。”更好的方法是：“这与OP的代码有着完全相同的问题：它试图在DOM元素上使用jQuery函数。@T.J.Crowder是的，你是对的。我更新了我的代码！谢谢！作为旁注：在每个selectfocus 上，一个新的focusout 事件被绑定。你应该建议在这里使用one（） here:）@A.Wolff:Good catch！我必须承认我已经读过函数的前几行了，其余的我都没读过@T.J.Crowder将select.one（'focusout'.function（）… 替换我原来的select.focusout（）… 效果也一样，或者有什么不同吗？@skribe：会的，是的，但我不会用它。焦点事件很疯狂，我不能绝对保证你不会在没有干预的情况下获得超过一个焦点（但也许我是偏执狂）。没有特别好的理由每次都分离/重新连接处理程序。但是如果您愿意，另一个选项是使用命名空间事件：select.off（“focusout.showall”）。on（“focusout.showall”，function（）{…}）；但是，是的，one 设计用于在事件触发时删除处理程序。附带说明：在每次选择focus 时，都会绑定一个新的focusout 事件。您应该建议使用one（）此处：）@a.Wolff:好的捕获！我必须承认我已经读过函数的前几行了，其余的我都没读过@T.J.Crowder将选择.one（'focusout'.function（）… 替换我原来的