[SOLUCIONADO] Cambio de Id por clase

JUMASOL · #1 (**permalink**) 16/01/2015, 04:00

Hola.

Tengo esta función:

Código:

function changeText(idElement) {
    var element = document.getElementById('elemento');
    if (idElement) {
        if (element.innerHTML === 'Leer más...') element.innerHTML = 'Cerrar';
        else {
            element.innerHTML = 'Leer más...';
        }
    }
}

 <a id="elemento" onClick="javascript:changeText(1)">Leer más...</a>

El problema es que "elemento" no va a ser una id sino una clase.

¿Se puede cambiar?

He visto que document.getElementById se debe sustituir por document.getElementByClass, pero en el resto hay algo que no me acaba de funcionar.

Gracias.

Panino5001 · #2 (**permalink**) 16/01/2015, 09:05

En lugar de getElementById podés usar la api selector:
https://developer.mozilla.org/en-US/....querySelector
https://developer.mozilla.org/en-US/...erySelectorAll
o getElementByClassName:
https://developer.mozilla.org/en-US/...ntsByClassName

JUMASOL · #3 (**permalink**) 16/01/2015, 11:08

Preferiría usar getElementsByClassName, pero no me está resultando por alguna razón.

Panino5001 · #4 (**permalink**) 16/01/2015, 11:14

Recordá que getElementsByClassName es una colección, la cual hay que referenciar por índice:

Código:

var els=document.getElementsByClassName('soldier');
//el primer elemento de la clase soldier:
var soldado1=els[0]
//el segundo elemento de la clase soldier:
var soldado2=els[1];

GeekGirl · #5 (**permalink**) 16/01/2015, 11:37

En qué browsers pensás usarlo? Tené en cuenta que getElementsByClassName no es estandar.
Por ejemplo en IE 8 no va a funcionar.

Podrías hacer algo como ésto para asegurarte que funcione en cualquier browser:

Código Javascript:

Ver original<script type="text/javascript"> 
    var links = document.getElementsByTagName("a");
 
    for (var a = 0; a < links.length; a++) {
        if (links[a].className == 'elemento') {
            if (links[a].innerHTML === 'Leer más...') {
                links[a].innerHTML = 'Cerrar';
            } else {
                links[a].innerHTML = 'Leer más...';
            }
        }
    }
</script>

JUMASOL · #6 (**permalink**) 16/01/2015, 12:34

Tiene que funcionar en todos, claro.

Y el script que muestras no me funciona. ¿Lo has probado tú?

PHPeros · #7 (**permalink**) 16/01/2015, 12:45

Usa querySelector y no des soporte a navegadores anteriores a IE8.

GeekGirl · #8 (**permalink**) 16/01/2015, 14:16

Te di una idea. No lo probé porque no tengo el html. Falta por supuesto en evento onclick.
Probá esto:

Código Javascript:

Ver originalvar links = document.getElementsByTagName("a");
 
    for (var a = 0; a < links.length; a++) {
        if (links[a].className == 'elemento') {
            links[a].onclick = function(){
                if (this.innerHTML === 'Leer más...') {
                    this.innerHTML = 'Cerrar';
                } else {
                    this.innerHTML = 'Leer más...';
                }
            }
        }
    }

Con el código como te lo paso, no tenés necesidad de llamar al evento onclick en tus etiqetas <a>. Con esto va a arrancar cuando se cliquee directamente.

JUMASOL · #9 (**permalink**) 16/01/2015, 15:54

Solucionado.

Coloco el código que funciona completo para el que le pueda interesar:

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
<head>
<script type="text/javascript">
function changeText() {    
var links = document.getElementsByTagName("a");
 
    for (var a = 0; a < links.length; a++) {
        if (links[a].className === 'elemento') {
            links[a].onclick = function(){
                if (this.innerHTML === 'Leer más...') {
                    this.innerHTML = 'Cerrar';
                } else {
                    this.innerHTML = 'Leer más...';
                }
            };
        }
    }
}        
</script>

</head>
<body>
<a class="elemento" onClick="changeText()">Leer más...</a>
<a class="elemento" onClick="changeText()">Leer más...</a>
<a class="elemento" onClick="changeText()">Leer más...</a> 
</body>
</html>

Gracias por vuestro interés.

GeekGirl · #10 (**permalink**) 20/01/2015, 06:31

De nada :P