jQuery

Question

ile bir DOM öğesini genişletme

Bir DOM öğesini, tümünü genişletmeden genişletmek istiyorum. Yani, kendi yöntemleri ve özellikleri ile özel bir sınıf istiyorum, ama aynı zamanda bir div olarak davranabilirim. Örneğin.

MyClass = function(){ 
    this.foo = "waaa"; 
} 
MyClass.prototype.changeText = function(newtext){ 
    // if this extended $(document.createElement("div")) something 
    // like this might be possible 
    this.html(newtext); 
} 
MyClass.prototype.alertFoo = function(){ 
    alert(this.foo); 
} 

var m = new MyClass(); 
$("body").append(m); 
m.changetext(); 

Bu mümkün mü?

Answer 1

DIV elemanı oluşturulan:

function MyClass(){ 
    this.foo = "waaa"; 
} 
MyClass.prototype = $('<div/>'); 
MyClass.prototype.changeText = function(newtext){ 
    this.html(newtext); 
} 
MyClass.prototype.alertFoo = function(){ 
    alert(this.foo); 
} 

var m = new MyClass(); 
$("body").append(m); 
m.changeText('appletree'); 

Answer 2

jQuery yalnızca dizeleri ve öğeleri kabul ettiği için ekleme satırına ilettiğinizde bunu anlayamaz. MyClass'ınız muhtemelen öğenin kendisini tutmak için belirli bir anahtara sahip olacaktır (ör. This.el = document.createElement ("div");), ancak jQuery bunu kendi başına bulamaz.

Answer 3

Yaptığınız gibi kendi nesnesini oluşturabilirsiniz. Daha sonra jQuery'nin elemanını genişletmek için extend method'u kullanabilirsiniz.

Answer 4

Öğeyi daha sonra almak istediğinizde sorun ortaya çıkacaktır. Belki de sadece böyle gibi elemanın veri olarak uzantılarını saklayabilirsiniz:

var new_div = $('<div id="new_div" />'); 
new_div.data('m', new MyClass()); 

Sonra sonradan işlevleri çağırmak için, gibi bir şey yapacağını:

new_div.data('m').changetext(new_div) 

Ve bir argüman olarak div geçmektedir.

Answer 5

Ayrıca bir eklenti olarak bunu yapabilir

: Herhangi element için Ardından

jQuery.fn.myKindOfElement = function(msg) { 
    var foo = msg; // foo is basically a private member 
    this.alertFoo = function() { 
     alert(foo); 
    }; 
    this.setFoo = function(msg) { 
     foo = msg; 
    }; 
    this.changeText = function(text) { 
     // doesn't make sense because html already exists here 
     this.html(text); 
    }; 
}; 

: Eğer sınıf jquery çocuğuyum sınıfını yapabilir

var myKind = $('<div/>').myKindOfElement('bar'); 
$('body').append(myKind); 
myKind.alertFoo(); // alerts 'bar' 
myKind.changeText('blah'); // same as myKind.html('blah')