jQuery addClass example

Change class name on click in jQuery

by artoo

HTML

<body>
  <div class="btn-group">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      <img src="http://lorempixel.com/75/50/abstract/">
      0123 4567 8912 3456
      <span class="glyphicon glyphicon-chevron-down"></span>
    </button>
    
    <ul class="dropdown-menu">
      <li class="dropdown-header">Member name (you)</li>
      <li>
        <a href="#" title="Select this card"><img src="http://lorempixel.com/75/50/abstract/">0123 4567 8912 3456</a>
      </li>
      <li>
        <a href="#" title="Select this card"><img src="http://lorempixel.com/75/50/abstract/">0123 4567 8912 3456</a>
      </li>
      <li class="dropdown-header">Member name</li>
      <li>
        <a href="#" title="Select this card"><img src="http://lorempixel.com/75/50/abstract/">0123 4567 8912 3456</a>
      </li>
    </ul>
  </div>
</body>

CSS

body { padding: 40px; }
.dropdown-toggle, .dropdown-menu { width: 300px }
.btn-group img { margin-right: 10px }
.dropdown-toggle { padding-right: 50px }
.dropdown-toggle .glyphicon { margin-left: 20px; margin-right: -40px }
.dropdown-menu>li>a:hover { background: #f1f9fd } /* $search-blue */
.dropdown-header { background: #ccc; font-size: 14px; font-weight: 700; padding-top: 5px; padding-bottom: 5px; margin-top: 10px; margin-bottom: 5px }

JavaScript

var colors = '{
  "milly": {
    "primary_color": "b",
    "secondary_color": "d",
    "accent_color": "f",
    "neutral_1": "",
    "neutral_2": "",
    "neutral_3": ""
  },
  "handyman": {
    "primary_color": "b",
    "secondary_color": "d",
    "accent_color": "f",
    "neutral_1": "",
    "neutral_2": "",
    "neutral_3": ""
  }
}'

var obj = JSON.parse(colors)