Как рандомить сразу все блоки?

Question

[historydev]

Добрый день.Скажите пожалуйста как мне выводить в каждом блоке .item свой рандомный блок .boxes?
Сейчас я владею этим.

Answer 1

[0xD34F]

Классы замените data-атрибутом, в зависимости от значения которого будет стилизоваться сам .item, а не вложенные в него элементы:

.item[data-xxx="1"]::before { background: #444; }
.item[data-xxx="2"]::before { background: #555; }
.item[data-xxx="3"]::before { background: #666; }
.item[data-xxx="4"]::before { background: #777; }
.item[data-xxx="5"]::before { background: #888; }
.item[data-xxx="6"]::before { background: #999; }

Соответственно, засовывать шесть div'ов в каждый .item не надо:

$('#counter').on('input', e => {
  $('#results').html('<div class="item"></div>'.repeat(e.target.value));
}).trigger('input');

// или

const results = document.querySelector('#results');
const counter = document.querySelector('#counter');

counter.addEventListener('input', ({ target: { value } }) => {
  results.innerHTML = Array(++value).join('<div class="item"></div>');
});
counter.dispatchEvent(new Event('input'));

Нет div'ов - не надо ни у кого переключать видимость. Достаточно выставить атрибуту случайное значение:

$('#view').on('click', () => $('.item').attr('data-xxx', () => 1 + Math.random() * 6 | 0));

// или

document.querySelector('#view').addEventListener('click', () => {
  document.querySelectorAll('.item').forEach(n => n.dataset.xxx = -~(Math.random() * 6));
});

https://jsfiddle.net/L76mav3t/