jQuery addClass example

Change class name on click in jQuery

by shtrih

HTML

<div class="inventory"></div>
<button class="add-cell" title="Добавить ячейку инвентаря">+</button>
<div class="clear"></div>

<div class="selector">
  <ul>
   <li>
     <img src="https://lh5.googleusercontent.com/Eis1JFFH1889n9IICoBIgXoH5q-iHh476UGobKz5m-iIcQKPvyg2ibnt2di4M13QtmrZIJhJcjIucM78FNN_zVM7DuAo19EkPRIBcd2oLjDjptchxbvoIFEgrFdTeyRwsK7H32qpLA" title="Мистер Ржавчик">
   </li>
   <li>
     <img src="https://lh3.googleusercontent.com/ly2nHXxqfqIAZtD01nNInj74HH63ljHs56XlVU22GQNL7_a0vFXfEYNYMC-1jhB3aZdhHLkk2DVxW1fnNS7QgQ_57e-uKJf1osvT7jrFRL-zS8geV3qa18ua0WUEiJIG8oKQLQdRfw" title="Облизанный ободок унитаза">
   </li>
      <li>
     <img src="https://lh3.googleusercontent.com/ly2nHXxqfqIAZtD01nNInj74HH63ljHs56XlVU22GQNL7_a0vFXfEYNYMC-1jhB3aZdhHLkk2DVxW1fnNS7QgQ_57e-uKJf1osvT7jrFRL-zS8geV3qa18ua0WUEiJIG8oKQLQdRfw" title="Облизанный ободок унитаза">
   </li>
      <li>
     <img src="https://lh3.googleusercontent.com/ly2nHXxqfqIAZtD01nNInj74HH63ljHs56XlVU22GQNL7_a0vFXfEYNYMC-1jhB3aZdhHLkk2DVxW1fnNS7QgQ_57e-uKJf1osvT7jrFRL-zS8geV3qa18ua0WUEiJIG8oKQLQdRfw" title="Облизанный ободок унитаза">
   </li>
      <li>
     <img src="https://lh3.googleusercontent.com/ly2nHXxqfqIAZtD01nNInj74HH63ljHs56XlVU22GQNL7_a0vFXfEYNYMC-1jhB3aZdhHLkk2DVxW1fnNS7QgQ_57e-uKJf1osvT7jrFRL-zS8geV3qa18ua0WUEiJIG8oKQLQdRfw" title="Облизанный ободок унитаза">
   </li>
      <li>
     <img src="https://lh3.googleusercontent.com/ly2nHXxqfqIAZtD01nNInj74HH63ljHs56XlVU22GQNL7_a0vFXfEYNYMC-1jhB3aZdhHLkk2DVxW1fnNS7QgQ_57e-uKJf1osvT7jrFRL-zS8geV3qa18ua0WUEiJIG8oKQLQdRfw" title="Облизанный ободок унитаза">
   </li>
      <li>
     <img src="https://lh3.googleusercontent.com/ly2nHXxqfqIAZtD01nNInj74HH63ljHs56XlVU22GQNL7_a0vFXfEYNYMC-1jhB3aZdhHLkk2DVxW1fnNS7QgQ_57e-uKJf1osvT7jrFRL-zS8geV3qa18ua0WUEiJIG8oKQLQdRfw" title="Облизанный ободок унитаза">
   </li>
      <li>
     <img...

CSS

body {
	background: #20262E;
	padding: 20px 10px;
	font-family: Helvetica, serif;
	max-width: 504px;
	margin: 0 auto;
}
.clear {
	clear: both;
}
.inventory {
	max-width: 504px;
}
.cell {
	position: relative;
	float: left;
	width: 64px;
	height: 64px;
	background-color: #ddd;
	border: 4px ridge #d0733d;
	margin-left: -0px;
}
.cell.active {
	background-color: #dee;
}
.cell.not-slot {
	float: right;
	border-color: #3d93d0;
}
.cell img {
	max-width: 100%;
}
.cell .count {
	position: absolute;
	top: 0;
	right: 0;
	width: 20px;
	height: 20px;
	border-width: 5px;
	border-radius: 50%;
	border-color: #fdfdfdc7;
	border-style: double;
	background: #6857d8;
	color: #eee;
	font-family: monospace;
	font-size: 16px;
	line-height: 22px;
	font-weight: bold;
	text-align: center;
	text-shadow: 1px 1px 0 #000;
}
.cell .controls {
	width: 100%;
	background: #eed;
	position: absolute;
	bottom: 0
}
.cell .controls a {
	padding: 0 2px;
	text-decoration: none;
	font-weight: bold;
}
.cell .controls .remove {
	color: #a70000;
}
.add-cell {
	float: left;
	margin-left: 4px;
	margin-top: 20px;
	width: 32px;
	height: 32px;
	border-width: 5px;
	border-radius: 50%;
	border-color: #ddd;
	border-style: double;
	background: #2c7523;
	color: #eee;
	font-family: monospace;
	font-size: 16px;
	text-align: center;
	line-height: 16px;
	text-shadow: 1px 1px 0 #000;
}
.add-cell:hover {
	background: #3a982f;
}
.add-cell:focus {
	outline: none;
}
.selector {
	display: none;
	margin-top: 10px;
	background: #bbb;
	max-width: 100%;
	border-radius: 4px;
	overflow-y: scroll;
	max-height: 204px;
}
ul {
	margin: 0;
	padding: 0;
}
li {
	list-style-type: none;
	float: left;
	margin: 2px;
	display: inline-block;
	width: 64px;
	height: 64px;
}
li:hover {
	background: #ddd;
}
li img {
	max-width: 64px;
}

JavaScript

var cells = [];
var items = [
	{
  	img: '',
    title: 'Пустая ячейка'
  },
	{
  	img: 'https://lh5.googleusercontent.com/Eis1JFFH1889n9IICoBIgXoH5q-iHh476UGobKz5m-iIcQKPvyg2ibnt2di4M13QtmrZIJhJcjIucM78FNN_zVM7DuAo19EkPRIBcd2oLjDjptchxbvoIFEgrFdTeyRwsK7H32qpLA',
    title: 'Мистер Ржавчик'
  },
  {
  	img: 'https://lh3.googleusercontent.com/ly2nHXxqfqIAZtD01nNInj74HH63ljHs56XlVU22GQNL7_a0vFXfEYNYMC-1jhB3aZdhHLkk2DVxW1fnNS7QgQ_57e-uKJf1osvT7jrFRL-zS8geV3qa18ua0WUEiJIG8oKQLQdRfw',
    title: 'Облизанный ободок унитаза'
  }
];
var selectedCellKey = false;

const inventory = $('.inventory'),
    cellTemplate = $('<div class="cell"><img/><div class="count">1</div></div>'),
    controlIncrementCounter = $('<a/>', {
        text: '+',
        title: 'Увеличить кол-во зарядов/прочность',
        class: 'inc',
        href: '#',
        click: function () {
            const idx = $(this).closest('.cell').index();

            if (cells[idx].count) {
                cells[idx].count += 1;
            }
            else {
                cells[idx].count = 2;
            }
            cellUpdateDOM(idx);
            saveState(cells);

            return false;
        }
    }),
    controlDecrementCounter = $('<a/>', {
        text: '–',
        title: 'Уменьшить кол-во зарядов/прочность',
        class: 'dec',
        href: '#',
        click: function () {
            const idx = $(this).closest('.cell').index();

            if (cells[idx].count && cells[idx].count > 1) {
                cells[idx].count -= 1;
            }
            cellUpdateDOM(idx);
            saveState(cells);

            return false;
        }
    }),
    controlNotSlot = $('<input/>', {
        type: 'checkbox',
        title: 'Предмет, не занимающий слот в инвентаре',
        click: function (e) {
            e.stopPropagation();

            const idx = $(this).closest('.cell').index();

            cells[idx].isNotSlot = $(this).is(':checked');
            cellUpdateDOM(idx);
           ...