jQuery addClass example

Change class name on click in jQuery

by joshmoto

HTML

<ul class="scores">
  <li class="score" data-score="23">23</li>
  <li class="score" data-score="28">28</li>
  <li class="score" data-score="46">46</li>
  <li class="score" data-score="4">4</li>
  <li class="score" data-score="49">49</li>
  <li class="score" data-score="57">57</li>
</ul>

<p>
  Total: <strong class="total"></strong>
</p>

<form>
  <button type="submit">Total Score</button>
</form>

JavaScript

$.fn.total_score = function() {

  var scores = $(this).map(function(e) {
    return $(this).data("score");
  }).get();
  
  console.log(scores);

  total = function(scores) {
    return scores.reduce(function(a, b) {
      return a + b
    }, 0);
  }

  console.log(scores);
  return this;

};

$('form').submit(function(event) {

  $('.scores li').total_score();

  event.preventDefault();

});