JQuery - Object [object Object]没有方法

Question

你好，我正面临着这个奇怪的JQuery问题。我的Js：

$("#flip-counter").centerH();
function centerH() {
var marginL = ( $(window).width() - $(this).width() ) / 2;
$(this).css("marginLeft",marginL+"px");
alert(marginL);
}

获取此错误：

Uncaught TypeError: Object [object Object] has no method 'centerH'         
(anonymous function) 

k jquery.js:2 
l.fireWith jquery.js:2 
p.extend.ready jquery.js:2
D jquery.js:2

jquery.js:2为空。

如果所有的代码都不能工作，我会理解的，但是现在除了这个之外，所有的代码都可以工作，并且我不能添加任何其他函数。我只是一直收到相同的错误。所有的文件都被正确地包含进来，当我删除这段JS代码时，我的代码就像一个护身符一样工作。

有什么建议吗？

Answer 1

这段代码：

$("#flip-counter").centerH()

...tries从$("#flip-counter")返回的jQuery对象中获取名为centerH的属性，然后将其作为函数调用。所以对象上必须有一个centerH函数。

这段代码：

function centerH() {
var marginL = ( $(window).width() - $(this).width() ) / 2;
$(this).css("marginLeft",marginL+"px");
alert(marginL);
}

对centerH函数执行...creates操作，但不执行任何操作将其添加到jQuery。

如果您正在尝试创建jQuery plug-in，则将该函数分配给$.fn

$.fn.centerH = centerH;

一旦你这样做了，$("#flip-counter").centerH()行就可以工作了。但请注意，在jQuery插件函数中，this是而不是一个DOM元素(您的$(this).css(...)代码似乎将其视为DOM元素)。在jQuery插件函数中，this是在其上调用函数的jQuery对象(因此改为this.css(...) )。

Answer 2

如果要将函数与jquery对象一起使用，则需要扩展jquery。

$.fn.centerH = function() {
    var marginL = ( $(window).width() - $(this).width() ) / 2;
    $(this).css("marginLeft",marginL+"px");
    alert(marginL);
}

Answer 3

centerH()函数位于全局作用域中。但是您从$("#flip-counter") jQuery对象调用它。

如果您想让您自己的自定义函数对jQuery对象可用，您可以这样创建它：

jQuery.fn.yourFunction = function() { 
    // do stuff
}