Question

我正在使用jQuery创建一个照片库，我希望有一个按钮来显示从相册中的照片中随机拍摄的照片。每次用户点击按钮时，此图片都应该更改。我有这个代码，但每次按下按钮我都会使用图像而不是每次都使用div＃images。

<script>
        $('button').on('click', function() {
            $.getJSON('images.json', function(data) {
                imageList = data;               
            });
            $('#images').append('<img src=' + imageList[Math.floor(Math.random() * imageList.length) + 1].img_src + '>').;  
        });
</script>

如您所见，我从JSON文件中读取图像，并从1到文件的长度随机化。任何的意见都将会有帮助。提前谢谢。

Answer 1

您需要在添加新图像之前清除图像div，否则图像将继续添加。

  <script>
            $('button').on('click', function() {
                $.getJSON('images.json', function(data) {
                    imageList = data;  
                    //Also, move the code inside getJson(). getJson is asynchronous.
                    //Clear the images HTML
                    $('#images').empty();
                    $('#images').append('<img src=' + imageList[Math.floor(Math.random() * imageList.length) + 1].img_src + '>').;               
                });
            });
    </script>

只是想知道：为什么不通过json调用检索1个随机图像，而不是获取所有图像然后选择一个（在服务器上写随机化代码）？

Answer 2

JSON数据是否会发生变化？否则，为什么每次都要求？不需要将下面的rand和image变量分开，但以后可能很容易阅读。

$('button').on('click', function() {
    if ( typeof imageList == 'undefined' || !imageList.length )
    {
        $.getJSON('images.json', function(data) {
            imageList = data;
            var rand = Math.floor(Math.random() * imageList.length) + 1;
            var image = $('<img />').attr('src', imageList[ rand ].img_src );
            $('#images').html( image );
        });  
    }
    else
    {
       var rand = Math.floor(Math.random() * imageList.length) + 1;
       var image = $('<img />').attr('src', imageList[ rand ].img_src );
       $('#images').html( image );
    }
});

Answer 3

确保关闭图片代码并清除现有图片

<script>
    $('button').on('click', function() {
        $.getJSON('images.json', function(data) {
            imageList = data;               
        });
        $('#images').html("");
        $('#images').append('<img src=' + imageList[Math.floor(Math.random() * imageList.length) + 1].img_src + '/>');  
    });
</script>

jQuery随机化图片

3 个答案: