Question

我有以下代码：

$(document).ready(function() {
  $(".content-image").each(function() {
    var angle = randAngle();
    $(".content-image").css("transform", "rotate(" + angle + "deg)");
  });
});

function randAngle() {
  return Math.floor(Math.random() * 5) + 1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img class="content-image" src="https://via.placeholder.com/150" />
<img class="content-image" src="https://via.placeholder.com/150" />

但是它以相同角度旋转所有图像。如何为每个图像设置不同的角度？

Answer 1

更改

$(".content-image").css("transform"...

到

$(this).css("transform"...

以便一次将变换应用于循环中的每个图像

Answer 2

在this循环中使用each()选择当前元素。出于演示目的，将您的随机数更改为0-360。

$(document).ready(function(){
    $(".content-image").each(function() {
        var angle = randAngle();
        $(this).css("transform", "rotate(" + angle + "deg)");
    });
});

function randAngle() {
    return Math.floor(Math.random() * 360);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img class="content-image" src="https://dummyimage.com/200x200/000/fff&text=Stack" />
<img class="content-image" src="https://dummyimage.com/200x200/000/fff&text=Overflow" />

如何旋转多张图像？

2 个答案: