jQuery addClass example

Change class name on click in jQuery

by robertunyx

HTML

<div id="q1">1</div>
  <div id="q2">2</div>
  <div id="q3">3</div>
  <div id="q4">4</div>
  <div id="q5">5</div>
  
  <button>Click to change ID</button>

CSS

#q1, #q2, #q3, #q4, #q5, #q7 {
  padding: 20px;
  transition: 0.8s ease-in-out;
}

#q1 {
  background-color: #eee;
}

#q2 {
  background-color: #ddd;
}

#q3 {
  background-color: #ccc;
}

#q4 {
  background-color: #bbb;
}

#q5 {
  background-color: #aaa;
}

#q7 {
  background-color: lightgreen;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  margin-top: 20px;
  font-size: 15px;
  color: #fff;
  transition: 0.1s ease-in-out;
  display: block;
  outline: none;
}

button:hover {
  background-color: #0050ee;
  cursor: pointer;
}

JavaScript

var button = $("button");

originalID = 2
newID = 7

button.on("click", function(){
  $('#q' + originalID).text(newID);
  $('#q' + originalID).attr('id', "q" + newID);
})