jQuery val() Methode auf einem benutzerdefinierten Objekt

Question

Ich habe ein Objekt namens ValueBox, die ich so erstellt:

function ValueBox(params) { 
    ... 
    $.extend(true, this, $('/* some HTML elements */')); 
    ... 
    var $inputBox = $('input[type=text]', this); 
    ... 
    this.val = function(newValue) { 
     if(typeof newValue == "number") { 
     $inputBox.val(newValue); 
     $inputBox.change(); 
     } else { 
     return parseFloat($inputBox.val()); 
     } 
    } 
} 

Ich habe ein Änderungsereignis auf einem bestimmten ValueBox Instanz, die immer dann, wenn die $inputBox Änderungen feuert, aber die Callback-Funktion ändern kann die Methode val() in meiner Klasse nicht verwenden. Ich gehe davon aus, dass ich mit der $(this).val() die jQuery val() -Methode aufruft, was natürlich nicht funktionieren würde. Ist es möglich, auf die von mir definierte Methode val() zuzugreifen?

Answer 1

Wenn Sie $inputBox.change() anrufen, übergeben Sie das Objekt ValueBox. Rufen Sie dann val an. Auf diese Weise müssen Sie sich keine Gedanken über Scoping-Probleme innerhalb von jQuery-Steuerelementen machen.

Answer 2

Ich glaube, du etwas wie das

function ValueBox(params) { 
    ... 
    $.extend(true, this, $('/* some HTML elements */')); 
    ... 
    this.inputBox = $('input[type=text]', this); 
    ... 
} 

ValueBox.prototype.val = function(newValue) { 
    if(typeof newValue == "number") { 
     this.inputBox.val(newValue); 
     this.inputBox.change(); 
    } else { 
     return parseFloat(this.inputBox.val()); 
    } 
}; 

// then this should work 
var test = new ValueBox(); 
test.val(123); 

In Prototyp versuchen sollten Sie öffentliche Methoden definieren, alles, was in ValueBox Funktion privat ist;

Answer 3

Wenn Sie wirklich daran interessiert sind, erstreckt val() für Ihr Plugin, können Sie so etwas wie die folgende versuchen:

Nehmen wir an, Sie eingestellt haben und das Attribut „Wert“ in dem äußersten Element Ihres Plugins.

jQuery.fn.extend({ val: function(newValue) { 
    if (newValue == null) { 
     return $(this).attr("value"); 
    } else { 
     $(this).attr("value", newValue);   
    } 
} 
}); 

Wenn die ID meiner Plugin-Instanz ist myValueBox dann würde ich in der Lage sein, val auf folgende Weise zu verwenden:.

$ ("# myValueBox") val()

Es funktionierte für mich, aber ich bin mir nicht sicher, ob es Ihren Anforderungen entspricht.

Answer 4

$.fn.yourpluginscope.originalVal = $.fn.val; 
$.fn.extend({ 
    val: function (value) { 
     if (/* detect your plugin element */) 
     { 
      if (value == undefined) 
       return /* getter */; 
      return $.fn.yourpluginscope.originalVal.call(/* setter */, value); 
     } 
     return $.fn.yourpluginscope.originalVal.call(this, value); 
    } 
}); 

richtiger Weg, um sich "native" jQuery Methode