单击时随机更改图像而不重复答案

【问题标题】：Change images randomly on click without repeating单击时随机更改图像而不重复
【发布时间】：2015-07-08 09:35:14
【问题描述】：

我在 Stack Overflow 上找到了这段代码：change images on click。

它对我有用。我希望它是随机的，但我怎样才能防止它重复图像。当用户单击所有图像时，它应该首先重复图像。

我用我的代码做了一个 JSfiddle：http://jsfiddle.net/gr3f4hp1/

JQuery 代码：

var images = ["02.jpg","03.jpg","01.jpg"];

$(function() {
    $('.change').click(function(e) {
    var image = images[Math.floor(Math.random()*images.length)];
        $('#bg').parent().fadeOut(200, function() {
            $('#bg').attr('src', 'items/'+image); 
              $(this).fadeIn(200);
        });
    });
});

【问题讨论】：

标签： javascript jquery html

【解决方案1】：

跟踪您生成的数字，如果重复，则获取一个新数字。

你可以解决这个问题

var usedImages = {};
var usedImagesCount = 0;

function displayImage(){

    var num = Math.floor(Math.random() * (imagesArray.length));
    if (!usedImages[num]){
        document.canvas.src = imagesArray[num];
        usedImages[num] = true;
        usedImagesCount++;
        if (usedImagesCount === imagesArray.length){
            usedImagesCount = 0;
            usedImages = {};
        }
    } else {
        displayImage();
    }
}

【讨论】：

我不是最擅长 JQuery 的，那我该如何实现呢？

【解决方案2】：

你可以试试这个代码。

var images = ["02.jpg","03.jpg","01.jpg"];
    var imagecon = [];
    $(function() {
        $('.change').click(function(e) {
            if(images.length == 0) { // if no image left
                images = imagecon; // put all used image back
                imagecon = []; // empty the container
            }
            var index = Math.floor(Math.random()*images.length);
            var image = images[index];
            imagecon.push(image); // add used image
            images.splice(index,1); // remove it to images
            $('#bg').parent().fadeOut(200, function() {
                $('#bg').attr('src', 'items/'+image);
                $(this).fadeIn(200);
            });
        });
    });

【讨论】：

感谢您的回复，但它似乎不起作用。
尝试 alert(image) 或 console.log(image) 。它会告诉你它的价值。

【解决方案3】：

您可以为每个图像添加一个类，如下所示：

image.addClass("viewed")

并编写一个 if 语句，仅在未查看该类时才显示该图像：

if(!image.hasClass(viewed)){
    (show the image methods);
    image.addClass("viewed") 
}

我不会为你编写所有的代码，只是尝试这种方式，学习，失败，成功，玩得开心！ :D

【讨论】：

【解决方案4】：

根据 imgCnt 变量尝试此图像更改。

var images = ["01.jpg","02.jpg","03.jpg","01.jpg"];
    var imgCnt=1;
    $(function() {
        $('.change').click(function(e) {
       // var image = images[Math.floor(Math.random()*images.length)];
            if(imgCnt >= images.length){
             imgCnt=0;   
            }
           var image =images[imgCnt];
           // alert(image);
            $('#bg').parent().fadeOut(200, function() {
                $('#bg').attr('src', 'items/'+image); 
                  $(this).fadeIn(200);
                imgCnt++;
            });
        });
    });

Demo

【讨论】：

【解决方案5】：

这里有很多方法，我只是将访问图像的值推入访问数组

两个数组只显示不同的元素

var images = ["02.jpg","03.jpg","01.jpg"];
var visited = [];
$(function() {
    $('.change').click(function(e) {
    var image = images[Math.floor(Math.random()*images.length)];
visited.push(image);
        $('#bg').parent().fadeOut(200, function() {

 y = jQuery.grep(images, function(value) {
if(jQuery.inArray(value, visited) == -1){
     $('#bg').attr('src', 'items/'+image); 

              $(this).fadeIn(200);
  }
});

     }   });
    });
});

希望对你有所帮助

【讨论】：