CODEWITHSUNDEEP
jqueryif-statement
Matt
Matt

Reputation: 5095

Shorten large repetitive if else statement in jquery

I was wondering what is the best way to shorten or clean up an if else statement such as this:

    if($(this).hasClass("home")) {
  $("body").addClass("home");
} else if($(this).hasClass("tasks")) {
  $("body").addClass("tasks");
} else if($(this).hasClass("roadmap")) {
  $("body").addClass("roadmap");
} else if($(this).hasClass("staff")) {
  $("body").addClass("staff");
} else if($(this).hasClass("timesheet")) {
  $("body").addClass("timesheet");
} else if($(this).hasClass("global-tasks")) {
  $("body").addClass("global-tasks");
} else if($(this).hasClass("deleted-tasks")) {
  $("body").addClass("deleted-tasks");
}

Upvotes: 0

Views: 39

Answers (3)

Taplar
Taplar

Reputation: 24965

Using filter to get the first class to add.

var classes = [ 'home', 'tasks', 'roadmap', 'staff', 'timesheet', 'global-tasks', 'deleted-tasks' ];
var $thingToTest = $('.thingToTest');

$('.result').addClass(function(){
  return classes.filter(function(clazz){
    return $thingToTest.hasClass(clazz);
  })[0];
});
.result { display: none; }
.result.staff { display: inherit; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="thingToTest staff global-tasks"></div>
<span class="result">Result</span>

Upvotes: 0

Andrei Todorut
Andrei Todorut

Reputation: 4526

Another solution is to use an attribute for that element, for example, data-body-class. 

$('body').addClass($(this).data('body-class'));

Upvotes: 0

Alex Mcp
Alex Mcp

Reputation: 19315

var classes = [
  "home",
  "tasks",
  "roadmap",
  "staff",
  "timesheet",
  "global-tasks",
  "deleted-tasks"
];

classes.forEach(function(className) {
  if ($(this).hasClass(className)) {
    $("body").addClass(className);
  }
});

Upvotes: 2

Related Questions