JQuery - это не ошибка функции

Question

Вот мой код:

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

Это дает мне ошибку.Что не так?

Answer 1

Эта проблема «наилучшим образом» решается с помощью анонимной функции для такой передачи объекта 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>

Answer 2

изменение

});


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

до

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


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

Это необходимо, потому что вам нужно вызвать анонимную функцию, которую вы создали с помощью

(function($){

и обратите внимание, что он ожидает аргумент, который он будет использовать внутри, как $, поэтому вам нужно передать ссылку на объект jQuery.

Кроме того, вам нужно изменить все this. на $(this)., кроме первого, в котором вы делаете return this.each

В первом (, где вам не нужен $()) это происходит потому, что в теле плагина this содержит ссылку на объект jQuery, соответствующий вашему селектору, но где-то глубже что this относится к конкретному элементу DOM, поэтому вам нужно обернуть его в $().

Полный код на http://jsfiddle.net/gaby/NXESk/

Answer 3

Проблема возникает, когда другая система захватывает переменную $. В качестве объектов из нескольких библиотек используются несколько переменных $, что приводит к ошибке.

Чтобы решить эту проблему, используйте jQuery.noConflict непосредственно перед вашим (function($){:

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

Answer 4

При преобразовании прототипа веб-формы ASP.Net в сайт MVC я получил следующие ошибки:

TypeError: $ (...). Accordion не является функцией
$ ("#accordion "). accordion (

---

$ ('# dialog'). dialog ({
TypeError: $ (...). диалог не является функцией

Он отлично работал в веб-формах. Проблема / решение заключалось в том, что эта строка в _Layout.cshtml

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

Закомментировала, чтобы увидеть, исчезнут ли ошибки.в BundlesConfig:

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

Answer 5

Это работает на моем случае:

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

Answer 6

Я решил это, переименовав свою функцию.

Изменено

function editForm(value)

до

function editTheForm(value)

Работает отлично.

Answer 7

В моем случае ту же ошибку можно было исправить гораздо проще.В основном моя функция была в файле .js, который не был включен в текущий aspx, который показывал.Все, что мне было нужно, это включить строку.