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:
Ver original<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
:
Ver originalfunction 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";
}
DEMO
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