jQuery addClass example

Change class name on click in jQuery

HTML

<div class="buttons">
  <div class="btn" data-amont="3">
    3
  </div>
  <div class="btn" data-amont="8">
    8
  </div>
  <div class="btn" data-amont="15">
    15
  </div>
  <div class="btn" data-amont="24">
    24
  </div>
</div>
<div class="wrapper"></div>

CSS

* {
  margin: 0;
  padding: 0;
}

body {
  width: 100%;
  height: 100vh;
  display: flex;
}

.buttons {
  position: absolute;
  top: 50%;
  left: 20px;
  transform: translateY(-50%);
}
.buttons .btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 40px;
  margin-bottom: 20px;
  background: #333;
  color: white;
  font-weight: 700;
  font-size: 22px;
  border-radius: 8px;
  border: 3px solid #333;
  cursor: pointer;
  transition: 0.3s;
}
.buttons .btn:hover {
  background: pink;
  color: #333;
}

.range-box {
  position: absolute;
  top: 50px;
  left: 50%;
  transform: translateX(-50%);
}
.range-box p {
  margin-top: 10px;
  min-height: 20px;
  border: 1px solid black;
  border-radius: 30px;
  padding: 10px;
  font-size: 20px;
  text-align: center;
}

.wrapper {
  width: 200px;
  height: 200px;
  padding: 20px;
  margin: auto;
  display: flex;
  flex-wrap: wrap;
  outline: 6px solid #333;
}
.wrapper .box {
  width: 100px;
  height: 100px;
  border: 1px solid #333;
  background: #eee;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 70px;
  color: #666;
  cursor: pointer;
  box-sizing: border-box;
  transition: background 0.3s, color 0.3s;
}
.wrapper .box:hover {
  background: #333;
  color: white;
}

.active {
  background: pink;
  color: black;
}

.out-panel {
  position: absolute;
  left: 0;
  bottom: 0;
  border: 1px solid black;
  padding: 20px;
  min-width: 300px;
  font-size: 20px;
}

JavaScript

var wrap = $('.wrapper');
var box = $('.box');

// Получить выбранное кол-во блоков
$('.btn').on('click', function() {
	var x = $(this).text();
	wrap.empty();
	setBlocks(x);
	fieldParam(x);
});

// Установить количество элементов
function setBlocks(x) {
	for (var i = 1; i <= x; i++) {
		r = getRandom(1, x);
		var block = '<div class="box" data-num="'+ r +'">'+ r +'</div>';
		wrap.append(block);
	}
}

// Получить рандомное число
function getRandom(min, max) {
	return Math.floor(Math.random() * (max - min + 1)) + min;
}



















// Получить количество элементов
function fieldParam(x) {
	var width = 100;
	var height = 100;
	var res;
	
	if (x == 3) {
		res = x;
	}
	else if (x == 8) {
		res = x / 2;
	}
	else if (x == 15) {
		res = x / 3;
	}
	else if (x == 24) {
		res = x / 4;
	}
	wrap.css({
		'width'  : width * res - width + 'px',
		'height' : height * res - height + 'px'
	});
}


// Получить атрибуты
function getAttribute() {
	var x = box.length;
	if (x == x) {
		// box.eq(-1).hide();
	}
	var arr = [];
	var amount = [];
	for (var i = 0; i < x; i++) {
		arr.push(box.eq(i).data('num'));
	}
	return arr;
}
attrubutes = getAttribute();