在javascript/jquery中添加任意函數給dom對象

Question

我需要添加一些函數，它將一個值返回給dom元素。我試圖使用jquery的綁定方法，但似乎事件總是返回一個jquery集合。

我的目標是創建一個flashcard應用程序。所以我創建了包含方法和變量的flashcard對象，其中包括表示頁面上的flashcard的dom元素。只要我只在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();