jQuery addClass example

Change class name on click in jQuery

by AngReload

HTML

<ul class='playersMenu'>
  <li data-id='0' class='active'>zero</li>
  <li data-id='1'>one</li>
  <li data-id='2'>two</li>
  <li data-id='all'>zero-one-two</li>  
</ul>

<h1 class='selectedTitle'>none</h1>

<div class='playersList'>
  <p class='playerItem' data-id='0' class='active'>zero</p>
  <p class='playerItem' data-id='1'>one</p>
  <p class='playerItem' data-id='2'>two</p>
  <p class='playerItem' data-id='all'>zero-one-two</p>  
</div>

JavaScript

$(function () {
  $('.playersMenu li').click(function () {
    if (!$(this).hasClass('active')) {
      var lastCloneLeft = '';
      var lastCloneTop = '';
      var getID = $(this).attr('data-id');
      $('.playersMenu li').removeClass('active');
      $(this).addClass('active');
      $('.selectedTitle').text($(this).text());
      if (getID == 'all') {
        $('.playersList .playerItem').fadeIn('slow');
      } else {
        $('.playersList .playerItem').hide();
        $('.playersList .playerItem[data-id=' + getID + ']').fadeIn('slow');
      }
    }
  });
});