Cambiar className a travez de un array

[Graveworm]

Iniciado por Alexis88

Solo necesitas pasarle a la función al propio elemento afectado mediante la palabra reservada this, capturar al elemento que posea dicha clase y quitársela para, finalmente, asignarla al elemento que acaba de ser pulsado. Para que no tengas que reasignar la misma clase al resto de elementos, asígnala desde el inicio, así solo se van cambiando a los elementos que son pulsados en el momento.

Código HTML:

<a id="button-1" class="iconoff" onclick="activar(this)">Ejemplo 1</a> 
<a id="button-2" class="iconoff" onclick="activar(this)">Ejemplo 2</a> 
<a id="button-3" class="iconoff" onclick="activar(this)">Ejemplo 3</a> 
<a id="button-4" class="iconoff" onclick="activar(this)">Ejemplo 4</a> 
<a id="button-5" class="iconoff" onclick="activar(this)">Ejemplo 5</a> 
<a id="button-6" class="iconoff" onclick="activar(this)">Ejemplo 6</a> 
<a id="button-7" class="iconoff" onclick="activar(this)">Ejemplo 7</a>
 

Código Javascript:

function activar(elem){
    //Tomo al elemento que posea la clase 'iconon'
    var viejo = document.querySelector(".iconon");
 
    //Si hay algún elemento con dicha clase, se la cambio por 'iconoff'
    if (viejo){
        viejo.className = "iconoff";
    }
 
    //Y al elemento que ha sido pulsado, le asigno la clase 'iconon'
    elem.className = "iconon";
}
 

[URL="http://jsbin.com/gozovabuti/1/edit?html,css,js,output"]DEMO[/URL]

P.D.: El javascript: en la llamada a la función desde el objeto HTML, no es necesario cuando se realiza desde algún evento on, además, no es necesario que escribas el nombre del evento en camelCase, como en onClick; con que todo esté en minúsculas es suficiente.

Saludos

Ohhh excelente!! la solución y gracias por tomarte el tiempo, mil gracias.


Tenia la impresión de que era así por lo que había visto (this) pero no se usarlo aun :(

:)

Saludos.