jQuery val () en un objeto personalizado
-
19-09-2019 - |
Pregunta
Tengo un objeto llamado ValueBox que he creado de esta manera:
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());
}
}
}
Tengo un evento de cambio en un caso particular ValueBox que dispara cada vez que cambia $inputBox
, pero la función de cambio de devolución de llamada es incapaz de utilizar el método val () de la clase. Asumo que mediante el uso $(this).val()
que estoy llamando el método jQuery val (), que por supuesto no iba a funcionar. ¿Es posible acceder al método val () que he definido?
Solución
Cuando se llama a $inputBox.change()
, pasarlo al objeto ValueBox
. A continuación, llame val
en eso. De esta manera, usted no tendrá que preocuparse por la determinación del alcance problemas dentro de los controles de jQuery.
Otros consejos
$.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);
}
});
Forma correcta extiende método jQuery "nativo"
Si usted está realmente interesado en la ampliación de val () para su plug-in, puede intentar algo como lo siguiente:
Supongamos que ha establecido y el atributo "valor" en el elemento más externo de su plugin.
jQuery.fn.extend({ val: function(newValue) {
if (newValue == null) {
return $(this).attr("value");
} else {
$(this).attr("value", newValue);
}
}
});
Si el ID de mi instancia del complemento es myValueBox entonces yo sería capaz de utilizar val de la siguiente manera:
$ ( "# myValueBox"). Val ()
Se trabajó para mí, pero no estoy seguro si cumple con sus requisitos.
Creo que se debe tratar algo por el estilo
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);
En el prototipo se define métodos públicos, todo lo que está en función de ValueBox
es privado;