jQuery addClass example

Change class name on click in jQuery

by ibrth

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="debug">
  <div class="function_time_1"></div>
  <div class="function_time_2"></div>
  <div class="function_time_3"></div>
  <div class="function_time_4"></div>
</div>

<div class="totalitems">
  <span class="total_txt">Total items:</span>
  <span class="total"></span>
</div>
<div class="allitems"></div>

<div class="individual_items">
  <div class="item strawberry"></div>
  <div class="item pear"></div>
  <div class="item orange"></div>
  <div class="item watermelon"></div>
  <div class="item fruit_salad"></div>
  <div class="item water"></div>
  <div class="item orange_juice"></div>
  <div class="item pear_juice"></div>
  <div class="item strawberry_juice"></div>
  <div class="item watermelon_juice"></div>
  <div class="item potato"></div>
  <div class="item french_fries"></div>
</div>

CSS

.strawberry{background-image:url(https://image.flaticon.com/icons/png/128/135/135717.png);}
.pear{background-image:url(https://image.flaticon.com/icons/png/128/167/167260.png);}
.orange{background-image:url(https://image.flaticon.com/icons/png/128/415/415734.png);}
.watermelon{background-image:url(https://image.flaticon.com/icons/png/128/415/415731.png);}
.fruit_salad{background-image:url(https://image.flaticon.com/icons/png/128/415/415744.png);}
.water{background-image:url(https://image.flaticon.com/icons/png/128/135/135662.png);}
.orange_juice{background-image:url(https://image.flaticon.com/icons/png/128/167/167612.png);}
.pear_juice{background-image:url(https://image.flaticon.com/icons/png/128/167/167623.png);}
.strawberry_juice{background-image:url(https://image.flaticon.com/icons/png/128/167/167254.png);}
.watermelon_juice{background-image:url(https://image.flaticon.com/icons/png/128/167/167620.png);}
.potato{background-image:url(https://image.flaticon.com/icons/png/128/135/135676.png);}
.french_fries{background-image:url(https://image.flaticon.com/icons/png/128/135/135589.png);}
.hunger {background-image:url(https://image.flaticon.com/icons/png/128/608/608857.png);}
.thirst {background-image:url(https://image.flaticon.com/icons/png/128/135/135662.png);}
.bladder {background-image:url(https://image.flaticon.com/icons/png/128/1402/1402847.png);}

body {
  background-color: #a3d5d3;
  font-family: arial;
}
.debug {
  background-color: #000;
  font-family: consolas;
  color: #ffed00;
  font-size: 13px;
}
.debug div {
  padding: 5px;
}
.totalitems {
  display: block;
  background: #131313;
  color: #fff;
  margin-bottom: 2px;
  text-align: center;
}
.totalitems .total_txt {
  margin: 5px;
  display: inline-block;
}
.allitems {
  display: block;
}
.item {
  display: inline-block;
  margin-right: 2px;
  box-sizing: border-box;
  background-image: none;
  vertical-align: top;
  width: 320px;
}
.items {
  border: 1px solid #000;
  margin-bottom: 2px;
 ...

JavaScript

var index = {
  "strawberry": 0,
  "pear": 1,
  "orange": 2,
  "watermelon": 3,
  "fruit_salad": 4,
  "water": 5,
  "orange_juice": 6,
  "pear_juice": 7,
  "strawberry_juice": 8,
  "watermelon_juice": 9,
  "potato": 10,
  "french_fries": 11
}

var array = [
  {
    "name": "strawberry",
    "price": "2.00",
    "type": "fruit",
    "stats": [
      {"type":"hunger","val":"4"},
      {"type":"thirst","val":"2"},
      {"type":"bladder","val":"-2"}
    ],
    "used_in":["strawberry_juice","fruit_salad"],
    "icon": "https://image.flaticon.com/icons/png/128/135/135717.png"
  },
  {
    "name": "pear",
    "price": "1.50",
    "type": "fruit",
    "stats": [
      {"type":"hunger","val":"6"},
      {"type":"thirst","val":"4"},
      {"type":"bladder","val":"-2"}
    ],
    "used_in":["pear_juice","fruit_salad"],
    "icon": "https://image.flaticon.com/icons/png/128/167/167260.png"
  },
  {
    "name": "orange",
    "price": "0.80",
    "type": "fruit",
    "stats": [
      {"type":"hunger","val":"6"},
      {"type":"thirst","val":"5"},
      {"type":"bladder","val":"-3"}
    ],
    "used_in":["orange_juice","fruit_salad"],
    "icon": "https://image.flaticon.com/icons/png/128/415/415734.png"
  },
  {
    "name": "watermelon",
    "price": "5.50",
    "type": "fruit",
    "stats": [
      {"type":"hunger","val":"4"},
      {"type":"thirst","val":"8"},
      {"type":"bladder","val":"-6"}
    ],
    "used_in":["watermelon_juice","fruit_salad"],
    "icon": "https://image.flaticon.com/icons/png/128/415/415731.png"
  },
  {
    "name": "fruit_salad",
    "price": "6.50",
    "type": "fruit",
    "stats": [
      {"type":"hunger","val":"10"},
      {"type":"thirst","val":"3"},
      {"type":"bladder","val":"-2"}
    ],
    "ingredients": ["strawberry","pear","orange","watermelon"],
    "icon": "https://image.flaticon.com/icons/png/128/415/415744.png"
  },
  {
    "name": "water",
    "price": "1.50",
    "type": "drink",
    "stats": [
      {"type":"thirst","val":"8"},
 ...