Tengo algunas imágenes que son demasiado grandes cuando hago el menú que contienen en más pequeño, es por eso que hice una segunda clase donde cambié el ancho y la altura.
Traté de agregar y eliminar la clase con javascript así:
if ($('img').hasClass('lorem')) { $('img').removeClass('lorem') $('img').addClass('smalllorem') } else { $('img').addClass('lorem') $('img').removeClass('smalllorem') }Ahora esto funciona perfectamente bien, pero esto también agregará las clases a mis otras imágenes en el sitio web, ¿cómo puedo especificar que solo se dé la clase "smalllorem" a los elementos que tienen la clase lorem? Debido a que las otras imágenes no tienen la clase "lorem", aún se les agregará la clase "smalllorem".
-> No entiendo por qué las imágenes sin la clase "lorem" entran en el código. Quiero decir, pregunto si la imagen tiene clase. ¿Por qué incluye los otros elementos de la imagen?
Buscaría una solución CSS antes de pasar a una de JavaScript. Pero respondiendo a la pregunta formulada...
No entiendo por qué las imágenes sin la clase "lorem" ingresan al código. Quiero decir, pregunto si img tiene clase.
Porque $("img") selecciona todas las imágenes, pero $("img").hasClass("lorem") solo mira la primera imagen para ver si tiene la clase. Luego, en cada rama de su if / else , está aplicando cambios a todas las imágenes ( $("img").addClass("lorem"); ). La API de jQuery es asimétrica en este sentido: los métodos que le dicen algo sobre el elemento solo miran el primer elemento de la colección jQuery, pero los métodos que cambian algo se aplican a todos los elementos de la colección.
Si te entiendo correctamente, quieres:
Elimine lorem de las imágenes que lo tienen, agregando smalllorem en su lugar
y
Elimine smalllorem de las imágenes que lo tienen, agregando lorem en su lugar
Básicamente, desea alternar ambas clases. Hay un método toggleClass para eso.
$("img.lorem, img.smalllorem").toggleClass("lorem smalllorem"); Eso selecciona todos los elementos img que tienen cualquiera de las clases y alterna las clases en ellos.
Ejemplo en vivo:
setTimeout(() => { $("img.lorem, img.smalllorem").toggleClass("lorem smalllorem"); }, 800); .lorem { border: 2px solid black; } .smalllorem { border: 2px solid yellow; } <div>lorem (black border) => smalllorem (yellow border):</div> <img class="lorem" src="https://via.placeholder.com/50.png/09f/fff"> <img class="lorem" src="https://via.placeholder.com/50.png/09f/fff"> <img class="lorem" src="https://via.placeholder.com/50.png/09f/fff"> <div>smalllorem (yellow border) => lorem (black border):</div> <img class="smalllorem" src="https://via.placeholder.com/50.png/09f/fff"> <img class="smalllorem" src="https://via.placeholder.com/50.png/09f/fff"> <img class="smalllorem" src="https://via.placeholder.com/50.png/09f/fff"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>En lugar de agregar una nueva clase a la imagen, puede hacer que responda:
.img { width: 100%; //define width max-width: 250px; //restrict the size (can use min-width aswell) height: auto; //auto adjust depending on the width } var count = 0; function resize(){ var menue = document.getElementById("container"); count++; if(count % 2) { menue.style.width = "50%"; menue.style.height = "50px"; } else { menue.style.width = "100%"; menue.style.height = "100px"; } } #container{ border: 1px solid black; width: 100%; height: 100px; transition: 330ms; } #home{ width: 15%; height: auto; min-width:10px: } menue <div id="container"> <img src="https://cdn-icons-png.flaticon.com/512/25/25694.png" id="home"> </div> <br> <input type="button" value="resize menue" onclick="resize()">