jQuery addClass example

Change class name on click in jQuery

by Gonzalo Guevara

HTML

<div id="banner-message">
  <p>Hello World</p>
  <button class="set_error">Set error</button>
  <button class="set_warning">Set warning</button>
  <button class="set_sucess">Set seuccess</button>
</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")

console.log(banner, 'init');

var clasess = {
  "error": ["error"],
  "success": ["success"],
  "warning": ["warning"]
};

// handle click and add class
button.on("click", function() {
  console.log(banner, 'this');
  
  var attri = banner.attr('class');
  var las_clases = "";
  console.log(attri, 'existe');
  console.log(las_clases, 'las clases');
  if (typeof attri !== 'undefined' && attri !== false) {
  	console.log("entra");
     las_clases = banner.attr('class').split(' ').join(' ');
  }
  
  if ($(this).hasClass("set_error")) {
    banner.toggleClass("error " + las_clases);
  }
  if ($(this).hasClass("set_warning")) {
    banner.toggleClass("warning " + las_clases);
  }
  if ($(this).hasClass("set_sucess")) {
    banner.toggleClass("sucess " + las_clases);
  }

  console.log(banner, 'banner');
  console.log(banner.attr('class').split(' ').join(' '));

})