jQuery addClass example

Change class name on click in jQuery

by joshmoto

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.touchswipe/1.6.18/jquery.touchSwipe.min.js"></script>
<!-- Visible elements -->
<div class="container pt-3">

  <p>
    <button onclick="newClone()">Add a clone</button>
  </p>

  <ul class="list-group scores mb-3" id="demo">
    <li class="list-group-item align-items-center" data-score="0" data-round="0" data-time="0">
      <div class="mr-auto whatami">
        original (swipe me first)
      </div>
      <span class="badge badge-secondary badge-pill">
        Swiped yeh!!!
      </span>
    </li>
  </ul>

</div>


<!-- Cloning element -->
<li class="list-group-item align-items-center clone" data-score="0" data-round="0" data-time="0">
    <div class="mr-auto whatami">
      a cloned element (now try swipe me)
    </div>
    <span class="badge badge-secondary badge-pill d-none">
      Swiped yeh!!!
    </span>
  </li>

CSS

/* test
-------------------------------------------------- */

var {
  font-style: normal;
}

.clone {
  display: none;
}

JavaScript

// touch swipe function when swiping list item
$(".scores li").swipe({
	
  // touch swipe parameteres
  swipe: function(event, direction, distance, duration, fingerCount, fingerData) {
  
  	// turn list item backgroun red to confirm swipe action wo
    $(this).attr('style', 'background:red;');
  },

	// swipe threshold 40 pixels
  threshold: 40

});

// create list item clone when button is clicked
function newClone() {
	
  // creating cloned var using clone html from outsite list
  var cloned = $('.clone').clone();
  
  // removing the cloned class to reveal list item in list
  $(cloned).removeClass('clone');

	// append the cloned item to list
  cloned.appendTo('.scores');
  
}