Tengo dos elementos <p> , $elem1 y $elem2. Colectivamente, podemos llamarlos $elems. Quiero que cada uno de sus textos sea de color rojo en los siguientes escenarios:
$elem1 cuando el tamaño de la pantalla es inferior a 600 píxeles de ancho $elem2 tan pronto como se carga la página (es decir, debería volverse rojo instantáneamente y permanecer rojo)
Ahora, podría hacer algo como:
$elem2.css('color', 'red'); if (screenSize < 600) { $elem1.css('color', 'red'); }Lo cual es manejable, pero ¿y si en lugar de hacer que el texto de cada elemento fuera rojo, quisiera agregar 20 atributos, más algunos eventos de clic y una clase CSS? Ahora el código anterior se ha disparado hasta convertirse en un montón de código duplicado.
Mi pregunta es, ¿cómo puedo escribir elegantemente jQuery/Javascript que abarque los escenarios de $elem1 y $elem2 para que el código "agregar atributo/evento/agregarclase" solo se explique una vez?
Intenté deletrear todos los atributos/eventos/addClass agregados para cada escenario por separado, y eso funciona, pero sé que causará problemas de mantenimiento en el futuro cuando olvide reemplazar algo en uno y no en el otro.
Puede pasar un objeto a .attr() para pasar múltiples atributos y valores
https://api.jquery.com/attr/#attr-atributos
Usando esto, podrías tener claves compartidas
const shared = { checked: "checked", "data-id": id } $elem2.attr(shared); $elem2.attr({ // elem2 specific }); if (screenSize < 600) { $elem1.attr(shared); $elem1.attr({ // elem1 specific }); }Por lo que vale, dado que le preocupa la duplicación de código, el mantenimiento y la gestión del cambio de presentación, una biblioteca alternativa declarativa/basada en componentes como React podría resolver sus problemas.
¿No podría darle a cada elemento un nombre de clase y actualizar css de esa manera? Por ejemplo, digamos que asignamos a elem1 y elem2 una clase css llamada aCssClassToUpdate. Luego haz lo siguiente:
const classesToUpdate = document.querySelectorAll('.aCssClassToUpdate'); classesToUpdate.forEach(classToUpdate => { classToUpdate.style.color = 'red'; });