3 contrasting ways to display 1 of many different classnames to denote element type. While HTML5 allows us to set what could be a type with data-* and assign it one of many values, IE6 and lower would still be unable to apply styles to that element. The

jQuery Toggle ClassNames

var statuses = ['drafted', 'on-the-clock'];
var self = this;

// Method 1: Lazy
$(this.el).removeClass(statuses.join(' '));
if (this.model.getStatus() == 'drafted') {
    $(this.el).addClass('drafted');
}
if (this.model.getStatus() == 'on-the-clock') {
    $(this.el).addClass('on-the-clock');
}

// Method 2: Trying
_.each(statuses, function(status) {
    $(self.el).removeClass(status);
    if (self.model.getStatus() == status) {
        $(self.el).addClass(status);
    }
});

// Method 3: Awesome
_.each(statuses, function(status) {
    $(self.el).toggleClass(status, (status == self.model.getStatus()));
});