jQuery addClass example

Change class name on click in jQuery

by Simon Price

HTML

<div id="banner-message">
  <p>Hello World</p>
  <button>Change color</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

a = [{ id:1, display:"Jamsheer", checked: true, frompageload: true}, { id:2, display:"Muhammed", checked: true}, { id:3, display:"Ravi", checked: true}, { id:4, display:"Ajmal", checked: true},  { id:5, display:"Ryan", checked: true}]
b = [{ id:1, display:"Jamsheer", checked: true}, { id:2, display:"Muhammed", checked: true}, { id:3, display:"Ravi", checked: false}, { id:4, display:"Ajmal", checked: true},  { id:5, display:"Ryan", checked: true}, { id:6, display:"Simon", checked: true}]

function comparer(otherArray){
  return function(current){
    return otherArray.filter(function(other){
      return other.id == current.id && other.display == current.display && other.checked == current.checked
    }).length == 0;
  }
}

var onlyInA = a.filter(comparer(b));
var onlyInB = b.filter(comparer(a));

result = onlyInA.concat(onlyInB);

console.log(result);
for(var i = 0; i < result.length; i++){
	var object = result[i];
  console.log(object);
}