Estoy estudiando JavaScript durante mi pasantía y mi jefe me pidió: ¿podría intentar hacer esto nuevamente, pero poner una clase en el div principal, en lugar de en cada Rect? ¿Significa eso que tengo que usar la clase padre para hacer el mismo trabajo? Porque lo he estado intentando desde esta mañana y no puedo averiguar cómo hacerlo.
mi código es bueno con la clase infantil:
const rect2 = document.getElementById("rect2"); // On récupère le rectangle 2 const allRects = document.getElementsByClassName("rect"); rect2.addEventListener("click", makeAllRectsSmaller); function makeAllRectsSmaller() { for (let index = 0; index < allRects.length; index++) { // console.log(allRects[index]); isBig = allRects[index].classList.contains("bigRect"); // console.log(isBig); if (isBig) { console.log(isBig); allRects[index].classList.remove("bigRect"); allRects[index].classList.add("smallRect"); // console.log(allRects[index]); } else { // Sinon allRects[index].classList.remove("smallRect"); allRects[index].classList.add("bigRect"); console.log(allRects[index]); } } // console.log(allRects); }Mi estilo y mi cuerpo son así.
<style> .rect { background: grey; width: 250px; height: 200px; margin: 10px; float: left; } .rect.red { background: red; } .rect.blue { background: blue; } .rect.bigRect { width: 250px; height: 200px; margin: 10px; } .rect.smallRect { width: 150px; height: 150px; margin: 10px; } </style> </head> <body> <div id="rectjs" class="exoJs"> <div id="rect1" class="rect red bigRect"></div> <div id="rect2" class="rect red bigRect"></div> <div id="rect3" class="rect red bigRect"></div> </div>Pero no puedo encontrar una manera de usar la clase principal en lugar de la clase secundaria.
¿Alguien podría ayudarme por favor? Muchísimas gracias
Harías algo como esto en tu CSS:
.exoJs div { /* your CSS */ } Esto apunta a los rect div s dentro del div principal ( .exoJs ).
Alterne la clase bigRect en el elemento #rectjs . No hay mucha necesidad de tener 3 clases ( rect , smallRect y bigRect ) si algunas de ellas tienen estilos similares. En su lugar, haga que los rects sean pequeños de forma predeterminada y solo alterne bigRect .
const rect2 = document.getElementById("rect2"); const rectjs = document.getElementById("rectjs"); rect2.addEventListener("click", makeAllRectsSmaller); function makeAllRectsSmaller() { rectjs.classList.toggle('bigRect'); } Luego aplica tus estilos así. .rect es la base del estilo, los colores pueden modificar cada rect. Pero bigRect ahora está en la clase .exoJS , y cuando lo esté, todos los elementos .rect que son sus descendientes deberían ser grandes.
.rect { background: grey; width: 150px; height: 150px; margin: 10px; float: left; } .rect.red { background: red; } .rect.blue { background: blue; } .exoJs.bigRect .rect { width: 250px; height: 200px; margin: 10px; }