Use modClass instead of jQuery's `addClass` or `removeClass` to save on writing conditional if-else statements

jQuery-modClass.md

jQuery.modClass()

In my opinion, instead of using the traditional if-else statements to switch CSS classes, using a conditional operator in conjunction with modClass makes the code simpler, easier to read and saves on code lines.

Instead of doing the traditional way:

if (i < 5) {
  jQuery('ul').removeClass('many-items');
} else {
  jQuery('ul').addClass('many-items');
}

We simply use:

jQuery('ul').modClass(i < 5 ? 'remove' : 'add', 'many-items');

Hope this is useful. Thanks!

modClass.js

jQuery.fn.extend({
    modClass: function(mod, classNames) {
        if(mod == 'add') {
            return this.each(function () {
                this.classList.add(...classNames.split(' '));
            });
        }
        if(mod == 'remove') {
            return this.each(function () {
                this.classList.remove(...classNames.split(' '));
            });
        }
    }
});

// Call examples:
// jQuery('body').modClass('add', 'xxx yyy zzz');
// jQuery('h1').modClass('remove', 'text-center');
// jQuery('p').modClass(use_italic ? 'add' : 'remove', 'text-italicise');