jQuery addClass example

Change class name on click in jQuery

by Shuaib Khan

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

var productData = [];

var productData2 = [];
/* var data = [{
"qty":1,
"name":"frank",
"sku":"frank-in"
},{
"qty":2,
"name":"bob",
"sku":"bob-en"
}];
localStorage.setItem("products", JSON.stringify(data)); */
var productData = JSON.parse(localStorage.getItem("products"));


    $(document).ready(function() {
         var data = '';
         jQuery("#addbutton").click(function(){
            var sku = jQuery('#get_product').val();
            var getQuantity = jQuery("input[name='qty']").val();
             jQuery('.configurable').each(function () {
                 sku+='-'+jQuery(this).val()
             });
            var i = 0;
            jQuery('#qty').each(function () {
                if(jQuery(this).val()) {
                    productData2.push({'qty': jQuery(this).val(),  'name': data.pr.name, 'sku': sku});
                    i++;
                }
            });

            if(productData == null){
                localStorage.setItem("products", JSON.stringify(productData2));
            }else{
                productData.push(productData2);
                localStorage.setItem("products", JSON.stringify(productData));
            }
            var store = JSON.parse(localStorage.getItem("products"));
            console.log(store);
            jQuery("#tabledata").append('<tr><td>' + data.pr.name + '</td><td>' + sku + '</td><td>' + getQuantity + '</td></tr>');
						//<td>' + abc + '</td><td>' + getQuantity + '</td>
        });
    });