Добавление функции к элементу dom с помощью jquery - PullRequest
Новая
       28

Добавление функции к элементу dom с помощью jquery

2 голосов
/ 07 февраля 2012

Я пытаюсь добавить пользовательскую функцию к конкретным элементам div в моем домене, которые имеют одно и то же имя класса.

Примерно так 

$(".custom-div").each(function(){
        $(this).newFtn = function() {
            $(this).addClass("makeover");
        }
});

Итак, я пытаюсь добавить newFtn к элементам div с именем класса ".custom-div".

После проб и ошибок и проверки элемента в firebug. Я получил это работать следующим образом 

$(".custom-div").each(function(){
        $(this).init.prototype.newFtn = function() {
            $(this).addClass("makeover");
        }
});

Но у меня есть несколько вопросов по этому поводу; Я не уверен, почему это работает, и есть ли какие-либо недостатки в том, чтобы делать это таким образом? Может кто-нибудь объяснить это, пожалуйста? Абстрактное объяснение должно быть в порядке.

Ответы [ 2 ]

9 голосов
/ 07 февраля 2012

Я думаю, что вы хотите написать плагин jQuery. Основная идея такова: 

(function($) {
    $.fn.newFtn = function() {
        this.each(function() {
            //Do stuff for each element in matched set
        });
    };
})(jQuery);

Затем вы можете применить этот метод к любому объекту jQuery: 

$(".custom-div").newFtn();

Обратите внимание, что именно так работают большинство встроенных методов jQuery (они выполняют итерацию по самому сопоставленному набору элементов, поэтому часто нет необходимости использовать each).

Вы можете узнать больше о разработке плагинов jQuery, начав с официального руководства .

Если вы действительно хотите просто добавить класс ко всем элементам в сопоставляемом наборе, вам абсолютно не нужно ничего этого делать. Просто вызовите addClass для объекта jQuery. Он будет применяться ко всем элементам, содержащимся в этом объекте.

1 голос
/ 07 февраля 2012

Попробуйте что-то вроде: 

function DisableCheckBox(o) {
    //No need for $('selector') here as 'o' is a jQuery object already.
    o.each(function () {
        o.addClass('makeover');
    //Other stuff...
    });
    //optionally return o on function exit if you want to do stuff to it outside this function
}

DisableCheckBox($(".custom-div"));
//or
var chk = DisableCheckBox($(".custom-div")); //if returning 'o' above.
...