jQuery addClass example

Change class name on click in jQuery

by talkhabi

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">





<div style="margin-bottom:15px">
  <textarea id="raw-data" class="form-control" rows="6"></textarea>
</div>

<div class="progress" id="q-progress">
  <div class="progress-bar progress-bar-striped"></div>
</div>


<button onclick="queue.toggle()" id="q-btn">START</button>


<table class="table table-striped table-bordered" id="table-result"></table>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#banner-message {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

#banner-message.alt {
  background: #0084ff;
  color: #fff;
  margin-top: 40px;
  width: 200px;
}

#banner-message.alt button {
  background: #fff;
  color: #000;
}

JavaScript

// put some example numbers inside textarea
// skip this section
var textarea = $('#raw-data')
for (var i = 0; i < 500; i++) {
  var num = i + '\n';
	textarea.val( textarea.val() + num ) 
}


// start of main codes

var queue = {
	list: [],
  index: 0,
  step: 20,
  running: false,
  $textarea: $('#raw-data'),
  $btn:      $('#q-btn'),
  $progress: $('#q-progress .progress-bar'),
  $table:    $('#table-result'),
  
  toggle: function() {
  	if (this.running)
      this.stop()
    else
      this.start()
  },
  start: function () {
  	this.running = true
    this.list = this.$textarea.val().split('\n').filter(function(item) {
    	return item.trim() !== ''
    })
    this.send()
    this.$btn.html('PAUSE')
  },
  stop: function() {
  	this.running = false
    this.$btn.html('START')
  },
  reset() {
    this.stop()
    this.index = 0
  },
  next: function() {
  	if (!this.running) return
    var total = this.list.length
  	this.index += this.step
    
    if (this.index > total) return this.reset()
    
    if (this.$progress) {
      var progress = Math.min(this.index / total * 100, 100)
      this.$progress.width(progress + '%')
      this.$progress.html(Math.round(progress) + '%')
    }
    
    this.send()
  },
  send: function() {
  	var _this = this
  	var nums = this.list.slice(this.index, this.index + this.step)
    if (!nums.length) return this.reset();
  	var data = {
      nums: nums
    }
    console.log(nums)
    setTimeout(function() {
    	_this.next()
    }, 500)
  	/*$.ajax({
    	url: '',
    	type: 'POST',
      data: data,
      dataType: 'json',
      success: function(result) {
      	if (result.success) {
          _this.$table.append(result.htmlResponse)
        	_this.next()
        } else {
          _this.send()
        }
      },
      error: function() {
      	_this.send()
      }
    })*/
  }
}

window.queue = queue