What's the most elegant way to perform the same actions on two different elements in two overlapping scenarios?

Question

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.

Answer 1

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';
});

Answer 2

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