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]

$('.program-link img').css('transform', () => `rotate(${Math.random() * 10 - 5}deg)`);

Answer 3

[Rsa97]

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