Cambiar clase (o solo background) a varios elementos al onclick

farve · #1 (**permalink**) 19/11/2008, 03:33

Hola

Lo que quiero es que al hacer click en un elemento este cambie su background-color.

Para eso podria hacer:

Código:

<p onclick = "this.style.backgroundColor='#F00'">Blabla</p>

Pero quiero que se cambie a varios elementos

es decir, si tengo esto:

Código:

<p class="a">Bla Bla</p>
<p class="b">Bla Bla</p>
<p class="c">Bla Bla</p>

<p class="a">Bla Bla</p>
<p class="b">Bla Bla</p>
<p class="c">Bla Bla</p>

que al hacer click en ".a" se cambien los 2 parrafos con clase "a"
Si le das a ".b", igual, que cambie de color los dos parrafos con class "b"
y si le das a ".c", lo mismo.

he estado mirando varias formas pero, ninguna es la que busco al 100%.
En esta (http://javascript.espaciolatino.com/trucos/t29.htm) usan id:

Código:

document.getElementById('par').className = 'invertir'

por lo que no podria hacerlo para varios elementos.

Y en este otro post, realmente no se muy bien que hace el script:
modificar-clase-css-con-javascript

Lo de cambiar el color, podria ser por medio del estilo del elemento, o cambiando el class de este, y que el nuevo class, ya este definido.

Saludos y gracias!

caricatos · #2 (**permalink**) 19/11/2008, 03:41

Hola:

podrías cambiar solo la clase del elemento contenedor (si se tratara de un contenedor común), y definir los estilos para las clases hijas...

.tipoA.a {background-color: red;}
.tipoA.b {background-color: blue;}
.tipoA.c {background-color: pink;}

.tipoB.a {background-color: yellow;}
.tipoB.b {background-color: lime;}
.tipoB.c {background-color: cyan;}

con esto, al cambiar la clase del contenedor común cambiarían los colores de los elementos dependientes...

Saludos

farve · #3 (**permalink**) 19/11/2008, 11:33

ok, queda asi:

Código:

<html>
<head>
<style type="text/css">
.tipoA .a {background-color: red;}
.tipoA .b {background-color: blue;}
.tipoA .c {background-color: pink;}

.tipoB .a {background-color: yellow;}
.tipoB .b {background-color: lime;}
.tipoB .c {background-color: cyan;}
</style>
</head>
<body>

<div class="tipoA" id="contenedor" onclick="document.getElementById('contenedor').className = 'tipoB'">
<p class="a">Bla Bla</p>
<p class="b">Bla Bla</p>
<p class="c">Bla Bla</p>

<p class="a">Bla Bla</p>
<p class="b">Bla Bla</p>
<p class="c">Bla Bla</p>
</div>
</body>
<html>

Con lo que al hacer click en cualquier sitio me cambir tipoA por tipoB y me cambiaria el color a todos, y yo solo quiero que me cambie el color al que haces click (y los de su misma class).
Incluso solo quiero que se le cambie el color a una clase a la vez, pero vamos por partes.

Algun otro metodo??
Saludos!

David · #4 (**permalink**) 19/11/2008, 11:48

Es que no estás aplicando de la forma como te comentaba caricatos. Lo que él decía era que en la clase tipoA cambiaras los que tenían la clase "a" a un color, y el resto les pusieras el color por defecto, en la clase tipoB cambies la clase "b" al color diferente y el resto a su color por defecto y así sucesivamente, y que no cambies en el onclick del div sino en el onclick del respectivo párrafo. Otra forma sería que los ids de los párrafos a cambiar fueran semejantes (id1, id2), así solo tendrás que recorrer los ids que comiencen por cierta cadena y cambiar su clase.

farve · #5 (**permalink**) 19/11/2008, 13:18

Hola, gracias por contestar, pues sigo sin entenderlo

,porque he probado lo siguiente y sigue sin ir.

Código:

<html>
<head>
<style type="text/css">
.tipoA .a , .tipoA .b {background-color: #FFF;}

.tipoB .a {background-color: #F00;}
.tipoB .b {background-color: #0F0;}
</style>
</head>
<body>

<div class="tipoA" id="contenedor" >
<p class="a" onclick="document.getElementById('contenedor').className = 'tipoB'">Bla Bla</p>
<p class="b" onclick="document.getElementById('contenedor').className = 'tipoB'">Bla Bla</p>
<p class="c" >Bla Bla</p>

<p class="a">Bla Bla</p>
<p class="b">Bla Bla</p>
<p class="c">Bla Bla</p>

<p class="a">Bla Bla</p>
<p class="b">Bla Bla</p>
<p class="c">Bla Bla</p>
</div>
</body>
<html>

Si quieres miralo aqui

Se aplica a a la vez a todos.

David · #6 (**permalink**) 19/11/2008, 13:26

Fíjate que en los dos párrafos estás asignando la misma clase al contenedor, lo cual está mal. Además, en los estilos, solo necesitas asignar el color a la respectiva clase, así los demás tomarán el color definido por defecto, por ejemplo:

Código css:

Ver original.tipoA .a {background-color: #0F0;}
 
.tipoB .b {background-color: #0F0;}
 
.tipoC .c {background-color: #0F0;}