重构jQuery代码块？

Question

我有一小段jQuery代码，我必须一遍又一遍地重复，每次迭代都只需要做一点改动。这是我所拥有的一个例子：

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

在我的代码中，我大约有30个部分。有没有一种方法可以简化该过程并清理我的代码？

Answer 1

您可以使用一个通用类来对元素进行分组，并使用一个data-*属性来保存与它们关联的值。尝试这个：

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>