Question

我正在制作图片库。当用户点击图像时，我试图通过应用随机的顶部和左侧值来改变给定部分中的其他图像。大多数情况都有效，但是，当我点击照片时，相同的随机顶部和左侧值将应用于该部分中的所有照片。我想将不同的随机顶部和左侧值应用于该部分中的其他照片。到目前为止，这是我生成和应用值的代码：

    //Move all the photos in the section
    function movePhotos() {
        var randomTop = Math.floor(Math.random() * 300) + 1;
        var randomLeft = Math.floor(Math.random() * 300) + 1;
        var photos = $(this).parent().find('.photo');

        photos.animate({ 'left': randomLeft, 'top': randomTop, }, 2000);
        $(this).stop().animate({ 'top': '0px', 'left': '100px' }).css({'position': 'absolute', 'z-index': '100000'});   
    };

        $('.full-size, .photo').click(movePhotos);

Answer 1

您应该使用jQuery each函数：

    //Move all the photos in the section
function movePhotos() {

    var photos = $(this).parent().find('.photo');

    photos.each(function(i,E){ 
        var randomTop = Math.floor(Math.random() * 300) + 1;
        var randomLeft = Math.floor(Math.random() * 300) + 1;
        $(E).animate({ 'left': randomLeft, 'top': randomTop, }, 2000);

    });   
    $(this).stop().animate({ 'top': '0px', 'left': '100px' }).css({'position': 'absolute', 'z-index': '100000'});
};

Answer 2

每张照片都需要生成一个随机数，因此您需要循环播放它们。 jQuery允许您使用each()

执行此操作

//Move all the photos in the section
function movePhotos() {
    $(this).parent().find('.photo').each(function(){
        var randomTop = Math.floor(Math.random() * 300) + 1;
        var randomLeft = Math.floor(Math.random() * 300) + 1;
        $(this).animate({ 'left': randomLeft, 'top': randomTop, }, 2000);

    });

    $(this).stop().animate({ 'top': '0px', 'left': '100px' }).css({'position': 'absolute', 'z-index': '100000'});   
};

$('.full-size, .photo').click(movePhotos);

Answer 3

我现在不是坐在我的开发电脑上，所以我无法验证这是否正确。但是，您的animate方法看起来需要一个.each（）迭代器。

Answer 4

您可以使随机函数成为一个函数，以确保每次代码循环时都会生成一个新值：

  function randomTop() {
        return Math.floor(Math.random() * 300) + 1;
  }

  function randomLeft() {
        return Math.floor(Math.random() * 300) + 1;
  }

function movePhotos() {

        var photos = $(this).parent().find('.photo');
        photos.animate({ 'left': randomLeft(), 'top': randomTop(), }, 2000);
        $(this).stop().animate({ 'top': '0px', 'left': '100px' }).css({'position': 'absolute', 'z-index': '100000'});   
    };

生成并应用随机顶部和左侧

4 个答案: