jQuery addClass example

Change class name on click in jQuery

by josekerekes

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.11/handlebars.min.js"></script>
<div id="hbResult">

</div>

<script id="item-template" type="text/x-handlebars-template">
	<p>MY name is {{name}} and my age is {{age}}
  <ul>
  	{{#each items}}
    	<li>{{item}}</li>
    {{/each}}
  </ul>
  <p>{{{bio}}}</p>
  <p>{{makeLink "whatever son" "www.google.com"}}</p>
  <p>{{changeColor "Make my text red" color="red"}}</p>
  <p>{{sayHello}}</p>
  <p>
  		{{#makeRadio "size"}}
      	Small
        Medium
        Large
      {{/makeRadio}}  
  </p>
</script>
<script type="text/javascript">
  var data = $("#item-template").html();
	var template = Handlebars.compile(data);
  
  Handlebars.registerHelper("makeLink", function(text, url){
  	text = Handlebars.Utils.escapeExpression(text);
    url = Handlebars.Utils.escapeExpression(url);
    
    var theLink= '<a href="' + url + '">' + text + '</a>';
    
    return new Handlebars.SafeString(theLink);
  });
  
  Handlebars.registerHelper("changeColor",function(text,options){
    console.log(options.hash)
  	text = Handlebars.Utils.escapeExpression(text);
    if(options.hash.color === "red"){ 
    	return new Handlebars.SafeString("<span style='color:red'>" +text+ "</span>")
    }
  });
  
  Handlebars.registerHelper("sayHello", function(options) {
  	switch(options.data.lang) {
    	case "spanish": 
      	return "Hola";
        break;
      case "french": 
      	return "Bonjour";
        break;  
      default:
      	return "Hello"
    }
  });
  
  Handlebars.registerHelper("makeRadio",function(name,options){
  	var radioList = options.fn();
    radioList.trim().split("\n");
    
    var output = "";
    for (var val in radioList) {
    	var item = radioList[val].trim();
      output += '<input type="radio" name="' + name +'" + '"value="' +item + '">' + item + '<br />';
    }
    return output;
  })
  
  var templateData = template({});
  
  var itemData = template({
  	name: "jozsi",
  	items:[
   ...

CSS

body {
  background:#000;
  color:#fff
}

JavaScript

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

// handle click and add class
button.on("click", function(){
  banner.addClass("alt")
})