Refactoring block of jQuery code?

Question

I have a section of jQuery code that I am having to repeat over and over with only a small change accompanying each iteration. Here is an example of what I have:

  if($('.smm').hasClass('vendor-icon-active')) {
      total = total + 1200;
  } else {
    total = total;
  }

  if($('.repman').hasClass('vendor-icon-active')) {
      total = total + 495;
  } else {
    total = total;
  }

  if($('.blog-management').hasClass('vendor-icon-active')) {
      total = total + 395;
  } else {
    total = total;
  }

  if($('.press-release').hasClass('vendor-icon-active')) {
      total = total + 195;
  } else {
    total = total;
  }

In my code, I have about 30 of those sections. Is there a way I could simplify that process and clean up my code?

the else is not needed, that would instantly reduce the size of your code quite a bit. — user400654
– user400654, Commented Oct 15, 2013 at 14:45
Yes because inside the else you are just setting total = total; — Nunners
– Nunners, Commented Oct 15, 2013 at 14:46

Rory McCrossan · Accepted Answer · 2019-03-13 08:57:31Z

5

You can use a common class to group the elements, and a data-* attribute to hold the value associated with them. Try this:

var total = 0;
$('.item').each(function(i, el) {
  var $item = $(el);
  if ($item.hasClass('vendor-icon-active')) {
    total += +$item.data('value');
  }
});
console.log(total);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="smm vendor-icon-active item" data-value="1200">Foo</div>
<div class="repman vendor-icon-active item" data-value="495">Foo</div>
<div class="blog-management vendor-icon-active item" data-value="395">Foo</div>
<div class="press-release vendor-icon-active item" data-value="195">Foo</div>

edited Mar 13, 2019 at 8:57

answered Oct 15, 2013 at 14:47

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user715564 Over a year ago

Oh yeah that actually looks great! is data-value supported by older versions of IE?

Abraham Uribe Over a year ago

you could use 'vendor-icon-active' as the common class so you won't need the if hasClass

Rory McCrossan Over a year ago

@AbrahamUribe that's true for my example, although it would depend on the OPs DOM structure.

Reinstate Monica Cellio · Accepted Answer · 2013-10-15 14:48:03Z

2

This should do the trick...

function updateTotal(className, value) {
    if ($('.' + className).hasClass('vendor-icon-active')) {
        total += value;
    }
}

updateTotal("ssm", 1200);
updateTotal("repman", 495);
updateTotal("blog-management", 395);
updateTotal("press-release", 195);

I just moved the main functionality into that one function. You can add as many function calls as you need afterwards :)

answered Oct 15, 2013 at 14:48

Reinstate Monica Cellio

26.2k6 gold badges54 silver badges67 bronze badges

1 Comment

Reinstate Monica Cellio Over a year ago

I do prefer @RoryMcCrossan's answer, but this gives you options and 2 very different styles of getting the same result.

Collectives™ on Stack Overflow

Refactoring block of jQuery code?

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related