jQuery addClass example

Change class name on click in jQuery

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<div id="banner-mess1">
  <button>Execute</button>
</div>

<div id="resultMessageEvent">

</div>

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

// find elements
var banner = $("#banner-message")
var button = $("button")

function showMessageEvent(textToShow, cssClass) {
  	new Promise(function(resolve, reject) {
    
      $("#resultMessageEvent").show("slow", function () {
        $("#resultMessageEvent").addClass(cssClass);
        $("#resultMessageEvent").html(textToShow);
    	});
      
      // Qui ovviamente fai richiesta AJAX
      setTimeout(function() {
        resolve('foo');
      }, 3000);

    
    }).then(function(v){
          $("#resultMessageEvent").removeClass(cssClass);
          $("#resultMessageEvent").addClass("alert-success");
          $("#resultMessageEvent").html(v);
    })

    

}
// handle click and add class
button.on("click", function(){
 showMessageEvent("Caricamento in corso...", "alert-warning");
})