Consulte el objeto selector inmediato con jQuery?

estoy tratando de aprender un poco de jQuery y configuración que una página de prueba con el siguiente código:Consulte el objeto selector inmediato con jQuery?

<a id='encode' href='javascript: void(0)'>encode</a> | 
<a id='decode' href='javascript: void(0)'>decode</a> | 
<br/> 
<textarea id='randomString' cols='100' rows='5'></textarea> 

<script type='text/javascript'> 
$(document.ready(function() { 
    $('#encode').click(function() { 
    $('#randomString').val(escape($('#randomString').val())); 
    }); 
    $('#decode').click(function() { 
    $('#randomString').val(unescape($('#randomString').val())); 
    });  
}); 
</script>

La idea es que puedo poner algo en el área de texto y haga clic en "codificar" o "decodificar", y escapará o escapará de lo que coloque en el área de texto.

Este código funciona bien, pero mi pregunta tiene que ver con cómo estoy cambiando el valor del área de texto. En mi código, estoy seleccionando el valor del área de texto dos veces: una vez para (un) escapar de él, y una vez más para cambiar el valor. IMO esto parece torpe y tal vez innecesario. Pensé que tal vez podría hacer algo como esto en su lugar:

$('#randomString').val(escape(this));

Pero this parece referirse al objeto del enlace hice clic, no el selector de #randomString, así que hay alguna otra palabra mágica que puede utilizar para hacer referencia a ese $('#randomString')?

Fuente

2011-12-12 slinkhi

La respuesta corta, si te entiendo correctamente, es no. No hay forma de referirse al $('#randomString') de lo que está hablando. Es solo un parámetro del método val, por lo que solo tiene una sintaxis de JavaScript, no jQuery "mágico".

Para llevar a cabo la tarea en cuestión y hacer el código más limpio y menos torpe, me gustaría guardar fuera del objeto jQuery para #randomString por lo que no tiene que mantener su creación:

$(document.ready(function() { 
    var $rndStr = $('#randomString'); 

    $('#encode').click(function() { 
     $rndStr.val(escape($rndStr.val())); 
    }); 

    $('#decode').click(function() { 
     $('#rndStr').val(unescape($rndStr.val())); 
    });  
});

Fuente

2011-12-12 18:56:05 FishBasketGordo

De acuerdo, parece el mismo principio que la respuesta de ShankarSangoli, pero usted acaba de crear el objeto una vez (lo cual, estoy de acuerdo, es más claro). Como mencioné en mi comentario a su respuesta, parece que tiene que haber una manera de hacer referencia a ella de alguna manera ... Quiero decir que JS necesita una referencia para hacer posible el encadenamiento de métodos, ¿verdad? – slinkhi

El encadenamiento del método jQuery se realiza al devolver el objeto jQuery del método '$()' (y la mayoría de los demás métodos jQuery llamados posteriormente), de ahí que provenga la referencia en ese caso. Lo que está preguntando sería una característica en JavaScript para referirse al objeto sobre el que se llamó un método. – FishBasketGordo

$('#randomString').val(escape(this));

Esto no obtiene el objeto que desea. En efecto, es el equivalente de hacer esto:

var foo = escape(this); 
$('#randomString').val(foo);

this solamente significa algo diferente cuando se inicia un nuevo ámbito de aplicación con una definición de función.

jQuery es que ofrece este tipo de funcionalidad con una opción de devolución de llamada:

$('#randomString').val(function (idx, oldVal) { 
    return escape(oldVal); 
});

El segundo parámetro es el valor actual del elemento; el valor de retorno establece un nuevo valor para el elemento.

Fuente

2011-12-12 18:41:19 lonesomeday

ah bien, esto es un poco más que un simple "esto" .. parece que debería haber algo más elegante y simple para referirse al objeto más inmediato seleccionado, pero supongo que esto es probablemente tan bueno como se obtiene – slinkhi

puede probar esta

$(document.ready(function() { 

    $('#encode').click(function() { 
    var $randomString = $('#randomString'); 
    $randomString.val(escape($randomString.val())); 
    }); 
    $('#decode').click(function() { 
    var $randomString = $('#randomString'); 
    $randomString.val(unescape($randomString.val())); 
    });  
});

Fuente

2011-12-12 18:41:26 ShankarSangoli

A los efectos de mi código de ejemplo, esto es en realidad más código, pero creo que, en última instancia, esto es probablemente lo que estoy buscando o lo más cercano a él. Todavía creo que podría (o debería) haber una forma de $ ([selector]). Algo ([referencetoselector]) ... quiero decir que ese es el punto de encadenar cosas ... EN ALGÚN lugar debe haber una referencia para js usar, de lo contrario, ¡los métodos de encadenamiento no serían posibles! – slinkhi

Usted podría hacer un poco más genérica:

$.fn.applyVal = function(func) { 
    return this.each(function() { 
     $(this).val(func($(this).val())); 
    }); 
};

A continuación, la siguiente llamada es suficiente:

$('#randomString').applyVal(escape);

Fuente

2011-12-12 18:46:47 pimvdb

Si desea que sea genérico, probablemente debería manejar la circunstancia de que se haya seleccionado más de un elemento. – lonesomeday

@lonesomeday: Estás en lo correcto, aunque .val también solo funciona en el primer elemento. – pimvdb

Consulte el objeto selector inmediato con jQuery?

Respuesta

Cuestiones relacionadas