Добавление произвольных функций к объектам dom в javascript / jquery

Question

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

Моя цель - создать приложение с помощью карточки.Поэтому я создал объекты flashcard, которые содержат методы и переменные, включая элемент dom, представляющий flashcard на странице.Пока я работаю только с элементом dom (перемещаясь и т. Д.), Все в порядке, но в какой-то момент мне нужно получить ссылку на реальный объект карты, чтобы получить доступ к дополнительным функциям.Вот конструктор, который я придумал:

    function make_flashcard {  
        var dom_element;
        function some_function() {}
        /*...other variables and functions */

        var card = {
            dom_element: dom_element,
            some_function: some_function,
            /*...other variables and functions */
        };

        return card;
    }

позже я хотел бы иметь возможность вызывать some_function извне, может быть так:

    card = dom_element.get_card();
    card.some_function();

Я попробовал следующие триподходы определения get_card внутри make_flashcard, все из которых потерпели неудачу:

    dom_element.get_card = function () {
        return card;
    };

    dom_element.prototype.get_card = function () {
        return card;
    };

или

    dom_element.bind("get_card", function () {
        return card;
    });

и затем вызывали

    card = dom_element.trigger("get_card");

Если у вас есть какие-либо советы, чтобы получитьв этом беге я был бы очень счастлив.Или вы думаете, что ко всему этому следует подходить иначе?

Заранее спасибо, Доминик

`

Answer 1

Что если вы расширили прототип коллекции jQuery?

$.fn.flashcard = function () {
    var self = this;

    if (!this.data("flashcard")) {
        this.data("flashcard", {
           element: self,
           some_function: some_function,
           /*...other variables and functions */
        });
    }

    return this.data("flashcard");
};

Тогда вы можете использовать его как:

var card = $("div.myClass").flashcard();
card.some_function();