¿Cómo modificar el texto de un enlace?

javi37 · #1 (**permalink**) 31/03/2010, 04:06

Hola.

Tengo este sencillo código con jquery

Código:

<style type="text/css">
	.enlace {
		color:#060;
	}
</style>
<script language="javascript" type="text/javascript" src="jquery.js"></script>
<script language="javascript" type="text/javascript">
	$(document).ready(function(){
		$('p').attr({'style': 'color: #F00;font-style: italic; border: 1px solid #F0F'});// añadimos un atributo
		$('a').addClass('enlace'); // añadimos una clase a los enlaces
		$('a').attr({'target': '_blank', 'rel': 'external'}); // abrir enlace en otra página
	});
	function seleccionado(txt){
		$('a').removeClass('enlace'); // quitamos una clase
		$('a').html(txt + ' *'); // modificamos el texto del enlace
		$('p').hide();// ocultamos los párrafos
	}
</script>
<body>
<p>Seleccione el enlace, y verá que pasa</p>
<a href="http://www.google.es" onClick="seleccionado('Google');" >Google</a>
</body>

Lo que quiero es saber como modificar el texto que muestra un enlace, en este "Google", sin necesidad de pasar "Google" a la función, es decir que fuese algo como pasar "this.href" para modificar el enlace en si.

Para que mostrase, como en este caso "Google *" al pulsar sobre el mismo.

Gracias

mayid · #2 (**permalink**) 31/03/2010, 08:06

Me parece que no lo estas planteando bien en el foro. La palabra Google aparece como texto, y como parametro. Queres modificar el parametro o el texto?

Si es el texto, a eso ya lo tenes:
$('a').html(txt + ' *'); // modificamos el texto del enlace

Tambien funcionaría:
$('a').texto(txt + ' *'); // modificamos el texto del enlace

Pero si en cambio se trata de modificar el paso de una variable, entonces habría que contemplar tu caso. Necesitas hacerlo dinámicamente? Esto es equivalente a lo que ya tenes:

onClick="var G = 'Google'; seleccionado(G);"

... pero no se bien que valores tiene que tomar tu variable. De donde lo tomaría?

javi37 · #3 (**permalink**) 01/04/2010, 04:00

Gracias por la respuesta.

Se trata de modificar el texto que muestra el enlace, no el href, ni el title, ni nada de eso, el texto que muestra el enlace en cualquier navegador. Y la forma es hacerlo dinámicamente, como se ve en mi código, es una forma de indicar a alguien que ese enlace ya lo ha pulsado....

La cuestión es que la función no pase "Google" en este caso, sino que tome directamente el texto del enlace, con lo que si mañana modifico un enlace solo debe modificar el enlace en si, no lo que pase la función....

un saludo

mayid · #4 (**permalink**) 01/04/2010, 08:52

Entonces así:

onclick="seleccionado( $(this).attr('href') );"

Casi como te lo imaginabas.

Dany_s · #5 (**permalink**) 01/04/2010, 14:04

con text() recupera el texto o si le pasas una cadena como parámetro lo modifica

para separar bien jquery de html te conviene usar eventos y no directamente el onclick de los elementos

Código HTML:

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Prueba</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(function(){
        $('a.mostrar').click( function (){
            texto = $(this).text();
            $(this).text(texto+'*');
            return false;
        });
    });
    </script>
</head>
<body>
    <a href="#" class="mostrar">Uno</a><br />
    <a href="#" class="mostrar">Dos</a><br />
    <a href="#" class="mostrar">Tres</a><br />
    <a href="#" class="mostrar">Cuatro</a><br />
    <a href="#" class="mostrar">Cinco</a><br />
    <a href="#">No muestra nada</a><br /><br />
</body>
</html>

uso el evento click en los enlaces que tengan clase "mostrar"
entonces podes agregar cuantos enlaces quieras y donde quieras pero para que responda a lo que querés tiene que tener la clase "mostrar" si no tiene no hace nada

mayid · #6 (**permalink**) 01/04/2010, 15:10

Estoy de acuerdo con Dany es usar un evento en la cabecera en vez de inline (aunque yo también uso eventos inline...)

Pero Dany, fijate que lo que el quiere es actualizar un parametro basandolo en el text que tengan los enlaces:

Cita:

La cuestión es que la función no pase "Google" en este caso, sino que tome directamente el texto del enlace, con lo que si mañana modifico un enlace solo debe modificar el enlace en si, no lo que pase la función....

Por eso propuse... oh! Que error tan grande! Quise decir text() y puse attr ("href")! No, no. Corrijo:
onclick="seleccionado( $(this).text() );"