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>
<div class="container pt-3">

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

  <ul class="list-group scores mb-3" id="demo">
    <li class="list-group-item d-none 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 d-none">
        Swiped yeh!!!
      </span>
    </li>
  </ul>

</div>

CSS

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

var {
  font-style: normal;
}

.badge {
  color: black !important;
}

JavaScript

var listitem;

listitem = $('.scores li:first-child');

listitem = $(listitem).clone();

$(listitem).addClass('d-flex');

$('.whatami', listitem).text('clone (swipe me second)');

listitem.appendTo('.scores');

$(".scores li").swipe({

  swipe: function(event, direction, distance, duration, fingerCount, fingerData) {
    $(this).attr('style', 'background:red;').find('.badge').removeClass('.d-none');
  },

  threshold: 40

});

function newClone() {

  listitem = $(listitem).clone();
  
  $('.whatami', listitem).text('another clone (swipe me again)');

  listitem.appendTo('.scores');
  
}