web-dev-qa-db-ja.com

jquery-関数エラーではありません

ここに私のコードがあります：

(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();
});

エラーが発生します。どうしましたか？

jqueryfunction
40
Phil Jackson

anonymous function を使用してjQueryオブジェクトを渡すことにより、この問題は「最良」に解決されます。

匿名関数は次のようになります：

<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>

これは、「モジュールパターン」などと一緒に使用する場合の（貧しい人の）「依存性注入」を実装する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').removeClass('VBHover');
                }, function() {
                    focus = false;
                    this.animate({ backgroundPosition: "0 0" }, { duration: 0 });
                    this.removeClass('VBfocus').addClass('VBHover');
                });
            });
        }
    })(jQuery);
</script>
89
Prisoner ZERO

変化する

});


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

に

})(jQuery); //<-- ADD THIS


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

これが必要な理由は、作成した匿名関数を呼び出す必要があるためです

(function($){

また、$として内部的に使用する引数を期待しているため、jQueryオブジェクトへの参照を渡す必要があります。

さらに、this.を実行する最初のものを除き、すべてのreturn this.eachを$(this).に変更する必要があります。

最初のもの（$()を必要としない場合）は、プラグイン本体でthisがjQueryへの参照を保持しているためですオブジェクトはセレクタに一致しますが、それより深い場所では、thisは特定のDOM要素を参照するため、$()でラップする必要があります。

http://jsfiddle.net/gaby/NXESk/ の完全なコード

10
Gabriele Petrioli

別のシステムが$変数を取得するときに問題が発生します。複数のライブラリからオブジェクトとして使用されている複数の$変数があるため、エラーが発生します。

解決するには、(function($){の直前に jQuery.noConflict を使用します。

jQuery.noConflict();
(function($){
$.fn.pluginbutton = function (options) {
...
6
Kamyar

ASP.Net WebformプロトタイプをMVCサイトに変換すると、次のエラーが発生しました。

TypeError：$（...）。accordionは関数ではありません
$（ "＃accordion"）。accordion（

$（ '＃dialog'）。dialog（{
TypeError：$（...）。dialogは関数ではありません

Webフォームでは問題なく機能しました。問題/解決策は、_Layout.cshtmlのこの行でした

@Scripts.Render("~/bundles/jquery")

コメントアウトして、エラーが消えるかどうかを確認します。次に、BundlesConfigで修正します。

bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-{version}.js"));
2
Jeremy Thompson

それは私の場合に機能します：

import * as JQuery from "jquery";
const $ = JQuery.default;
2
Luillyfe

関数の名前を変更して解決しました。

かわった

function editForm(value)

に

function editTheForm(value)

完全に動作します。

1
rmooney

私の場合、同じエラーがはるかに簡単に修正されました。基本的に、私の機能は、現在表示されていたaspxに含まれていない.jsファイルにありました。必要なのは、include行だけです。

0
Ash