I have two <p> elements, $elem1 and $elem2. Collectively, we can call them $elems. I want to make each of their text red in color under the following scenarios:
$elem1 when the screen size is under 600 pixels wide $elem2 as soon as the page loads (aka, it should turn red instantly and stay red)
Now, I could do something like:
$elem2.css('color', 'red');
if (screenSize < 600) {
$elem1.css('color', 'red');
}
Which is manageable, but what if instead of making each element's text red, I wanted to add 20 attributes, plus some on click events and a CSS class. Now the above code has ballooned up to a whole lot of duplicate code.
My question is, how can I elegantly write jQuery/Javascript that encompasses both $elem1 and $elem2's scenarios so that the "add attribute/event/addClass" code is only spelled out once?
I've tried spelling out all the added attributes/events/addClass for each scenario separately, and that does work, but I know it's going to cause maintenance issues in the future when I forget to replace something in one and not the other.
You can pass an object to .attr() to pass multiple attributes and values
https://api.jquery.com/attr/#attr-attributes
Using this, you could have shared keys
const shared = { checked: "checked", "data-id": id }
$elem2.attr(shared);
$elem2.attr({
// elem2 specific
});
if (screenSize < 600) {
$elem1.attr(shared);
$elem1.attr({
// elem1 specific
});
}
For what it's worth, given that you are concerned about code duplication, maintenance and managing presentation change, a declarative/component-based alternative library like React might solve your problems
Couldn't you give each element a class name and update css that way? For example say we assign elem1 and elem2 a css class called aCssClassToUpdate. Then do following:
const classesToUpdate = document.querySelectorAll('.aCssClassToUpdate');
classesToUpdate.forEach(classToUpdate => {
classToUpdate.style.color = 'red';
});