jquery - 不是一个函数错误 [英] jquery - is not a function error

问题描述

这是我的代码：

 （function（$）{
 $ .fn.pluginbutton = function（选项）{
 myoptions = $ .extend（{left：true}）; 
返回this.each（function（）{
 var focus = false; 
 if（focus = == $ false）{
 this.hover（function（）{
 this.animate（{backgroundPosition：0 -30px}，{duration：0}）; 
 this.removeClass（ 'VBFocus'）。addClass（'VBHover'）; 
}，function（）{
 this.animate（{backgroundPosition：0 0}，{duration：0}）; 
 this.removeClass（'VBfocus'）。removeClass（'VBHover'）; 
}）; 
} 
 this.mousedown（function（）{
 focus = true 
 this.animate（{backgroundPosition：0 30px}，{duration：0}）; 
 this.addClass（'VBfocus'）。removeClass（'VBHover'）; 
}，function（）{
 focus = false; 
 this.animate（{backgroundPosition：0 0}，{duration：0}）; 
 this.removeClass（'VBfocus'）。addClass（'VBHover'）; 
}）; 
}）; 
} 
}）; 
 
 
 $（document）.ready（function（）{
 $（'。smallTabsHeader a'）。pluginbutton（）; 
}）; 
  

它给我一个错误。什么是错误的？

解决方案

使用 匿名函数 来传递jQuery对象：

<

 < script type =text / JavaScript的> 
（函数（$）{
 //你传递jQuery，然后用$ -sign 
将它别名//所以你的内部代码不会改变
}） （jQuery的）; 
< / script> 
  

这是JavaScript实现（穷人）'依赖注入'的方法，模块模式。

所以你的代码看起来像：

当然，你可能想做一些

 < script type =text / javascript>更改为您的内部代码现在，但您明白了。 
（function（$）{
 $ .fn.pluginbutton = function（options）{
 myoptions = $ .extend（{left：true}）; 
 return this.each （function（）{
 var focus = false; 
 if（focus === false）{
 this.hover（function（）{
 this.animate（{backgroundPosition： 0 -30px}，{duration：0}）; 
 this.removeClass（'VBfocus'）。addClass（'VBHover'）; 
}，function（）{
 this。 animate（{backgroundPosition：0 0}，{duration：0}）; 
 this.removeClass（'VBfocus'）。removeClass（'VBHover'）; 
}）; 
} 
 this.mousedown（function（）{
 focus = true 
 this.animate（{backgroundPosition：0 30px}，{duration：0}）; 
 this.addClass （ 'VBfocus'）。REM oveClass（ VBHover）; 
}，function（）{
 focus = false; 
 this.animate（{backgroundPosition：0 0}，{duration：0}）; 
 this.removeClass（'VBfocus'）。addClass（'VBHover'）; 
}）; 
}）; 
} 
}）（jQuery）; 
< / script> 
  

Here is my code:

(function($){
    $.fn.pluginbutton = function (options) {
        myoptions = $.extend({ left: true });
        return this.each(function () {
            var focus = false;
            if (focus === false) {
                this.hover(function () {
                    this.animate({ backgroundPosition: "0 -30px" }, { duration: 0 });
                    this.removeClass('VBfocus').addClass('VBHover');
                }, function () {
                    this.animate({ backgroundPosition: "0 0" }, { duration: 0 });
                    this.removeClass('VBfocus').removeClass('VBHover');
                });
            }
            this.mousedown(function () {
                focus = true
                this.animate({ backgroundPosition: "0 30px" }, { duration: 0 });
                this.addClass('VBfocus').removeClass('VBHover');
            }, function () {
                focus = false;
                this.animate({ backgroundPosition: "0 0" }, { duration: 0 });
                this.removeClass('VBfocus').addClass('VBHover');
            });
        });
    }
});


$(document).ready(function () {
    $('.smallTabsHeader a').pluginbutton();
});

It gives me an error. What's wrong?

解决方案

This problem is "best" solved by using an anonymous function to pass-in the jQuery object thusly:

The Anonymous Function Looks Like:

<script type="text/javascript">
    (function($) {
        // You pass-in jQuery and then alias it with the $-sign
        // So your internal code doesn't change
    })(jQuery);
</script>

This is JavaScript's method of implementing (poor man's) 'Dependency Injection' when used alongside things like the 'Module Pattern'.

So Your Code Would Look Like:
Of course, you might want to make some changes to your internal code now, but you get the idea.

<script type="text/javascript">
    (function($) {
        $.fn.pluginbutton = function(options) {
            myoptions = $.extend({ left: true });
            return this.each(function() {
                var focus = false;
                if (focus === false) {
                    this.hover(function() {
                        this.animate({ backgroundPosition: "0 -30px" }, { duration: 0 });
                        this.removeClass('VBfocus').addClass('VBHover');
                    }, function() {
                        this.animate({ backgroundPosition: "0 0" }, { duration: 0 });
                        this.removeClass('VBfocus').removeClass('VBHover');
                    });
                }
                this.mousedown(function() {
                    focus = true
                    this.animate({ backgroundPosition: "0 30px" }, { duration: 0 });
                    this.addClass('VBfocus').removeClass('VBHover');
                }, function() {
                    focus = false;
                    this.animate({ backgroundPosition: "0 0" }, { duration: 0 });
                    this.removeClass('VBfocus').addClass('VBHover');
                });
            });
        }
    })(jQuery);
</script>

这篇关于jquery - 不是一个函数错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！