[SOLUCIONADO] Cambiar className a travez de un array

[Graveworm]

Hola amigos soy algo nuevo en esto de javascript y estoy tratando de hacer unos botones que cambian de estilo con la siguiente función:

Código:

function activar(opcion){
	var botones = [document.getElementById('button-1'),document.getElementById('button-2'),document.getElementById('button-3'),
	document.getElementById('button-4'),document.getElementById('button-5'),document.getElementById('button-6'),document.getElementById('button-7')];
	
	if (opcion==0) {
		botones[0].className = 'iconon';
		botones[1].className = 'iconoff';
		botones[2].className = 'iconoff';
		botones[3].className = 'iconoff';
		botones[4].className = 'iconoff';
		botones[5].className = 'iconoff';
		botones[6].className = 'iconoff';
	} 
}

¿Hay alguna manera de simplificarlo si las opciones del array del 1 al 6 se les va a asignar la misma clase?

Pense que indicando en el mismo serviría poniéndolo así:

Código:

botones[0].className = 'iconon';
botones[1,2,3,4,5,6].className = 'iconoff';

mi codigo html es asi

Código HTML:

<a id="button-1" class="iconon" onClick="javascript: activar(0)">Ejemplo 1</a> 

Espero alguien pueda ayudarme o decirme de que manera puedo hacerlo mas simple, se que hay varias formas de hacer casi todo, y en mi caso siempre que oprimo un boton, hago que a los demas se les asigne la clase de inactivos y que el que oprimi se active.

Saludos.

[NueveReinas]

Iniciado por Graveworm

en mi caso siempre que oprimo un boton, hago que a los demas se les asigne la clase de inactivos y que el que oprimi se active.

Usa this y problema solucionado.

[superweb360]

Si usases jQuery podrías hacer esto

Código Javascript:

$('.iconon').attr('class', 'iconoff');
 

[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";
}
 

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

[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.