Math.random() в цикле each(). Как сделать чтобы в каждой итерации число было рандомным?

Question

[Adik Izat]

Столкнулся с проблемой: мне нужно повернуть блоки на этой странице, как указано на рисунке ниже (каждый рисунок повернут под рандомным углом).


Как решение, я применил код jQuery:

$(document).ready(function () {
        $('.program-link').each(function(){
            var degree = Math.random() * (5 + 5) - 5;
            $('.program-link img').css(
                {transform: 'rotate(' + degree + 'deg)'}
            )
        });
    });

В итоге выясняю, что Math.random() у меня на странице работает не совсем корректно. При перезагрузке страницы остается тот же самый угол, и все рисунки повернуты под одним углом.

Answer 1

[Владимир Проскурин]

Вы хоть и выполняете рандом для каждого program-link, но назначаете этот рандом не к текущему элементу, а к всем. Код $('.program-link img') берет все элементы img из program-link. т.е. каждую итерацию, вы создаете случайный поворот, и назначаете его ко всем картинкам. В итоге, после работы скрипта, все картинки имеют один угол поворота - последний сгенерированный.
Вот так лучше:

$(document).ready(function () {
        $('.program-link').each(function(){
            var degree = Math.random() * (5 + 5) - 5;
            $(this).find('img').css( // берем картинку только из текущего .program-link
                {transform: 'rotate(' + degree + 'deg)'}
            )
        });
    });

Comments

[Adik Izat]

Вот я тупоооой))) После последней итерации он всем рисункам одно значение задает же... Спасибо, что подсказали)

Answer 2

[0xD34F]

const selector = '.program-link img';
const variation = 10;
const key = 'transform';
const getVal = () => `rotate(${variation * (Math.random() * 2 - 1)}deg)`;

$(selector).css(key, getVal);

// или

document.querySelectorAll(selector).forEach(n => {
  n.style[key] = getVal();
  // или
  n.style.setProperty(key, getVal());
  // или
  n.style.cssText += key.concat(': ', getVal());
  // или
  n.setAttribute('style', key + ': ' + getVal());
});

Answer 3

[Rsa97]

Так вы в каждой итерации задаёте угол для всех картинок.