Asignar Mismo Atributo a Varios Elementos con un Click

LeoNicoPerez · #1 (**permalink**) 23/03/2015, 02:56

Hola amigos, tengo esa pregunta...
Como asignar un mismo atributo a varios elementos en HTML.

Les cuento, lo que estoy haciendo ahora es:

<a href="#NB">
<li id="X" onclick="
MR.style.opacity='0.6';
MM.style.opacity='0.6';
MC.style.opacity='0.6';>
PALABRA A CLIQUEAR</li></a>

y lo que ando buscando hacer es algo así:

<a href="#NB">
<li id="X" onclick="
MR&&MM&&MC.style.opacity='0.6';>
PALABRA A CLIQUEAR</li></a>

Pero ésto último que cité no funciona jeje!!

Hay alguna manera de agrupar ID's en un evento
así como en éste caso onclick??

Espero que me entiendan
y puedan ayudarme, abrazo grande!!

NueveReinas · #2 (**permalink**) 23/03/2015, 04:12

¿Puedes referenciar qué es "MR", "MM", "MC"?
Y a ser posible, también deja el código del evento onlick, por favor.

PHPeros · #3 (**permalink**) 23/03/2015, 05:15

No funciona porque no se hace así.

La forma en que se hace es separando cada sentencia por ";" como haces en el primer ejemplo.

LeoNicoPerez · #4 (**permalink**) 23/03/2015, 14:16

Hola chicos, gracias por responder!!

"MR", "MM", "MC" son id's de varios Span.

Sé que hay que separar cada cosa con ; como en el primer
ejemplo, pero el código se hace muy extenso así, por eso quería
saber si se podía simplificarlo de alguna manera, por eso cité
el segundo ejemplo, aunque sé que está mal xD pero para
que se den una idea de lo que busco...

PHPeros · #5 (**permalink**) 23/03/2015, 14:29

Claro que se puede, pero existe un foro para tratar temas específicos de JavaScript.

La idea sería obtener los elementos e iterarlos mediante un bucle.

LeoNicoPerez · #6 (**permalink**) 23/03/2015, 15:30

Muchas gracias por responder nuevamente!!!
No sabía bien en qué categoría publicar ésto, podrías moverlo por favor??

No entiendo muy bien lo de los bucles jeje...

LeoNicoPerez · #7 (**permalink**) 23/03/2015, 20:12

Si alguien puede ayudarme o mover el tema al foro correspondiente lo agradecería!! :3

LeoNicoPerez · #8 (**permalink**) 23/03/2015, 20:17

----
ÉSTE TEMA LO PUBLIQUÉ EN OTRA SECCIÓN, SI PUEDEN
BORREN EL OTRO TEMA, AQUÍ ES LA SECCIÓN CORRESPONDIENTE.
----

Hola amigos, tengo ésta pregunta...
Como asignar un mismo atributo a varios elementos en HTML.

Les cuento, lo que estoy haciendo ahora es:

<a href="#NB">
<li id="X" onclick="
MR.style.opacity='0.6';
MM.style.opacity='0.6';
MC.style.opacity='0.6';>
PALABRA A CLIQUEAR</li></a>

y lo que ando buscando hacer es algo así:

<a href="#NB">
<li id="X" onclick="
MR&&MM&&MC.style.opacity='0.6';>
PALABRA A CLIQUEAR</li></a>

Pero ésto último que cité no funciona jeje!!

Hay alguna manera de agrupar ID's en un evento
así como en éste caso onclick??

Espero que me entiendan
y puedan ayudarme, abrazo grande!!

Alexis88 · #9 (**permalink**) 23/03/2015, 20:52

Podrías reunirlos en una lista de nodos con el método querySelectorAll, iterar dicha lista y asignar el valor en cuestión a la propiedad especificada.

Código Javascript:

Ver original[].forEach.call(document.querySelectorAll("#MR, #MM, #MC"), function(elemento){
    elemento.style.opacity = 0.6;
});

Saludos

LeoNicoPerez · #10 (**permalink**) 23/03/2015, 21:01

Hola Alexis, gracias por tu pronta respuesta!!
Mira, no sabría como aplicar eso que me decís en mi código.

Básicamente yo tengo un enlace en un LI y que a partir de
cliquear dicho enlace, muchos div y span son afectados.

<a href="#NB">
<li id="MC" onclick="
MR.style.opacity='0.5';MM.style.opacity='0.5';MC.s tyle.opacity='1'; CMA.style.display='none';CMR.style.display='none'; CMM.style.display='none';
CMC.style.display='block';">PALABRA QUE CLIQUEO</li>
</a>

MR, MM, MC, CMA, CMR, CM y CMC son divs y spans xD
y como verás algunos atributos se repiten.

Quería ver si había alguna manera más
sencilla/simplificada/corta de escribir el ejemplo que cité...

Alexis88 · #11 (**permalink**) 23/03/2015, 21:12

De la forma en la que te indiqué, es como puedes hacer lo que buscas. Para que surta efecto, colócalo entre etiquetas <script></script> justo antes de la etiqueta </body>. Si no funciona, vuelves y nos muestras el código actualizado.

Saludos

EDITO: Para que se aplique cuando pulses el <li> de id 'MC', haz esto:

Código HTML:

Ver original<li id="MC" onclick="cambiar()">TEXTO</li>

Código Javascript:

Ver originalfunction cambiar(){
    [].forEach.call(document.querySelectorAll("#MR, #MM, #MC"), function(elemento){
        elemento.style.opacity = 0.6;
    });
 
    [].forEach.call(document.querySelectorAll("#CMA, #CMR, #CMM"), function(elemento){
        elemento.style.display = "none";
    });
 
    document.querySelector("#CMC").style.display = "block";
}

fede5426 · #12 (**permalink**) 23/03/2015, 21:44

Yo lo haria con Jquery, asignas una clase a los 3 span y usas esa clase para llamarlos y aplicar los estilos:

Código HTML:

Ver original<li id="X">CLIQUEAR</li>
 
<span id="MR" class="elspan"> </span>
<span id="MM" class="elspan"> </span>
<span id="MC" class="elspan"> </span>

Código Javascript:

Ver original$("#X").click(function(){
  
  $(".elspan").css({"opacity":"0.6"});
  
});

El ejemplo:
http://codepen.io/anon/pen/OPdNgQ (No prestes atencion al CSS, es solo para que se vean los cuadros y para que no quede tan serio el ejemplo :P)

LeoNicoPerez · #13 (**permalink**) 23/03/2015, 23:21

Wooo, creo que es lo que ando buscando jeje!! Muchas muchas gracias, probaré con eso!!

LeoNicoPerez · #14 (**permalink**) 23/03/2015, 23:24

Genial!! Lo probaré y te contaré cómo me fue!! Muchas gracias!!!