检测到重复图像后生成新的随机图像答案

【问题标题】：generate new random image after duplicate image is detected检测到重复图像后生成新的随机图像
【发布时间】：2021-03-25 21:47:00
【问题描述】：

我正在尝试创建一个测验，人们在其中对 4 个随机图像进行排名，使用拖放功能将图像排序为他们的偏好。每张图片必须出现两次。

同一张图片不能在同一个比较中出现两次（即icon1、icon1、icon3、icon7）如果生成了重复的随机图像，则应选择新的图像。重复图像不应出现在比较中。

当出现重复项时，我已经识别出代码，但是，重复项在 html 中仍然可见。

这是导致问题的随机图像函数。我迫切需要帮助。

function randomImageRank(){
      var images = JSON.parse(window.sessionStorage.getItem("images"));
      var practice = JSON.parse(window.sessionStorage.getItem("practice"));
    
      total = window.sessionStorage.getItem("total")
      count = total - ((JSON.parse(window.sessionStorage.getItem("images")).length + JSON.parse(window.sessionStorage.getItem("practice")).length) - 1);
      document.getElementById("counter").innerHTML = "You are on image " + count + " of " + total;
      counter += 1


     random1 = Math.floor(Math.random() * images.length);
     random2 = Math.floor(Math.random() * images.length);
     random3 = Math.floor(Math.random() * images.length);
     random4 = Math.floor(Math.random() * images.length);
    
      var image1 = document.getElementById("drag1")
      var image2 = document.getElementById("drag2")
      var image3 = document.getElementById("drag3")
      var image4 = document.getElementById("drag4")
    
      if (practice.length > 0 ){
        image1.src = practice[0][0]
        image2.src = practice[0][1]
        image3.src = practice[0][2]
        image4.src = practice[0][3]
        practice.splice(0, 1)
        window.sessionStorage.setItem("practice", JSON.stringify(practice))
    } else {
        if (counter % 15 == 0 ) {
            image1.src = ("images/images/break_rank1.png")
            image2.src = ("images/images/break_rank2.png")
            image3.src = ("images/images/break_rank3.png")
            image4.src = ("images/images/break_rank4.png")
    } else {
        if (images.length == 0) {
            sendRank();
        } else { 
            if ((images[random1] == images[random2] ||  images[random1] == images[random3] || images[random1] == images[random4]  
                 || images[random2] == images[random4] || images[random3] == images[random2] ||images[random3] == images[random4])) {
            
                    rnd1 = Math.floor(Math.random() * images.length);
                    rnd2 = Math.floor(Math.random() * images.length);
                    rnd3 = Math.floor(Math.random() * images.length);
                    rnd4 = Math.floor(Math.random() * images.length);

                    random1 = rnd1
                    random2 = rnd2
                    random3 = rnd3
                    random4 = rnd4
            
                    image1.src = images[random1]
                    image2.src = images[random2]
                    image3.src = images[random3]
                    image4.src = images[random4]
            
                    console.log("duplicate")
                    
                } else {
                image1.src = images[random1]
                image2.src = images[random2]
                image3.src = images[random3]
                image4.src = images[random4]
                console.log("no duplicate")
            }
            }
         
         counter = counter + 1
         images.splice(random1, 1);
         images.splice(random2, 1);
         images.splice(random3, 1);
         images.splice(random4, 1);
         window.sessionStorage.setItem("images", JSON.stringify(images))

        }
      }
    }
    
    

// Rank Website 
function startRank(){ 
    var practiceArray = new Array();
    practiceArray[0] = ["images/images/practice/practice1.jpg", "images/images/practice/practice2.jpg", "images/images/practice/practice4.jpg", "images/images/practice/practice7.jpg"]
    
    
    var imageArray = new Array();
    var imageArray = ["images/images/icon1.jpg", "images/images/icon2.jpg", "images/images/icon3.jpg", "images/images/icon4.jpg", "images/images/icon5.jpg", "images/images/icon6.jpg", "images/images/icon7.jpg",
    "images/images/icon8.jpg", "images/images/icon9.jpg", "images/images/icon10.jpg", "images/images/icon11.jpg","images/images/icon12.jpg", "images/images/icon13.jpg", 
    "images/images/icon14.jpg", "images/images/icon15.jpg","images/images/icon16.jpg", "images/images/icon17.jpg", "images/images/icon18.jpg", "images/images/icon19.jpg",
    "images/images/icon20.jpg", "images/images/icon21.jpg", "images/images/icon22.jpg", "images/images/icon23.jpg","images/images/icon24.jpg", "images/images/icon25.jpg", 
    "images/images/icon26.jpg", "images/images/icon27.jpg", "images/images/icon28.jpg", "images/images/icon29.jpg", "images/images/icon30.jpg", "images/images/icon31.jpg", "images/images/icon32.jpg", "images/images/icon33.jpg", "images/images/icon34.jpg",
    "images/images/icon35.jpg", "images/images/icon36.jpg", "images/images/icon37.jpg", "images/images/icon38.jpg", "images/images/icon39.jpg", "images/images/icon40.jpg","images/images/icon1.jpg", "images/images/icon2.jpg", "images/images/icon3.jpg", "images/images/icon4.jpg", "images/images/icon5.jpg", "images/images/icon6.jpg", "images/images/icon7.jpg",
    "images/images/icon8.jpg", "images/images/icon9.jpg", "images/images/icon10.jpg", "images/images/icon11.jpg","images/images/icon12.jpg", "images/images/icon13.jpg", 
    "images/images/icon14.jpg", "images/images/icon15.jpg","images/images/icon16.jpg", "images/images/icon17.jpg", "images/images/icon18.jpg", "images/images/icon19.jpg",
    "images/images/icon20.jpg", "images/images/icon21.jpg", "images/images/icon22.jpg", "images/images/icon23.jpg","images/images/icon24.jpg", "images/images/icon25.jpg", 
    "images/images/icon26.jpg", "images/images/icon27.jpg", "images/images/icon28.jpg", "images/images/icon29.jpg", "images/images/icon30.jpg", "images/images/icon31.jpg", "images/images/icon32.jpg", "images/images/icon33.jpg", "images/images/icon34.jpg",
    "images/images/icon35.jpg", "images/images/icon36.jpg", "images/images/icon37.jpg", "images/images/icon38.jpg", "images/images/icon39.jpg", "images/images/icon40.jpg" ]
    
    
    
    var ranked = {}
    window.sessionStorage.setItem("ranked", JSON.stringify(ranked));
    window.sessionStorage.setItem("images", JSON.stringify(imageArray));
    window.sessionStorage.setItem("practice", JSON.stringify(practiceArray));
    
    counter  = 0;
    window.sessionStorage.setItem("counter", counter);
    
    total = (JSON.parse(window.sessionStorage.getItem("images")).length + JSON.parse(window.sessionStorage.getItem("practice")).length)
    count = total - ((JSON.parse(window.sessionStorage.getItem("images")).length + JSON.parse(window.sessionStorage.getItem("practice")).length) - 1);
    window.sessionStorage.setItem("total", total)
    document.getElementById("counter").innerHTML = "You are on image " + count + " of " + total;
    
    }
    
    // this returns the name of the picture eg image1
    function serialize () {
      var serialized = []
      var img = document.querySelectorAll('[data-id]')
      img.forEach(image => {
      serialized.push(image.src.split('/').pop())
      })
      return serialized
    }
      
    // this allows you to sort the images using drag and drop
    var sorted = document.getElementById("rankedPicture")
    Sortable.create(sorted, {
    group: "rankedImages",
    onEnd: function(e) {
    console.log(serialize()) 
    },
    
    store: {
      // We keep the order of the list
      set: (sorted) => {
      var order = sorted.toArray ()
     // console.log(order)
      localStorage.setItem (sorted.options.group.name, order.join ('|'))
      },
    
      // We get the order of the list
      get: (sorted) => {
      var order = localStorage.getItem (sorted.options.group.name)
      return order? order.split ('|'): []
      }
      }
})

<html> 

<head> 
  <link rel="stylesheet" type="text/css" href="css/mainstyle.css">
</head>

<h1> Rank the Icons from Most to Least Beautiful</h1>

  <h3> Drag and Drop the icons into position </h4>

    <hr>

  <body class="body" onload="startRank()"> 
    <div id="rankedPicture" class="imagesRank" style="width: 100%;">
  

        <img src="images/images/start_rank.png" data-id="1" id = "drag1" width="200px" height="100px">

        <img src="images/images/start_rank.png" data-id="2" id = "drag2" width="200px" height="100px"> 

        <img src="images/images/start_rank.png" data-id="3" id = "drag3" width="200px" height="100px"> 

        <img src="images/images/start_rank.png" data-id="4" id = "drag4" width="200px" height="100px"> 
  
    </div>

    <br>
    
    <br>
    
    <hr>
    <div class="buttonRank"> 
    <button type="button" onclick="storeRank()" style="height:50px;width:100px;font-size:medium;"> Submit</button>
  </div>

  <br>

  <div class="counter" id=counter></div>
  </div>

      <script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>
      <script type="text/javascript" src="js/main.js"></script>

</body>
</html>

【问题讨论】：

标签： javascript html random duplicates

【解决方案1】：

用 while 循环替换你的 if 块

while ((images[random1] == images[random2] ||  images[random1] == images[random3] || images[random1] == images[random4]  
        || images[random2] == images[random4] || images[random3] == images[random2] ||images[random3] == images[random4])) {
        
    rnd1 = Math.floor(Math.random() * images.length);
    rnd2 = Math.floor(Math.random() * images.length);
    rnd3 = Math.floor(Math.random() * images.length);
    rnd4 = Math.floor(Math.random() * images.length);

    random1 = rnd1
    random2 = rnd2
    random3 = rnd3
    random4 = rnd4

    console.log("duplicate")     
} 

image1.src = images[random1]
image2.src = images[random2]
image3.src = images[random3]
image4.src = images[random4]
console.log("no duplicate")

【讨论】：

谢谢！！当我使用 while 循环时，它确保没有两个重复的图像显示在同一个比较中。然而，每张图片都出现了两次以上（即接头按预期工作）你知道为什么会这样吗？
你要使用切片，而不是拼接 - The splice() method changes the original array，所以运行一次后，索引全部更改。
拼接方法是不是非得用？由于图像必须从数组中删除，因此它不会再次出现，那么一旦数组中没有图像，图像的排名就会停止？
我试图同时做到这一点，以便索引。顺序不会改变，images.splice(random1, 1, random2, 1, random3, 1, random4, 1) 但是，这也不起作用
你可以使用拼接，但你需要确保你这样做，以便以后的索引不会改变，即 .greatest 。在这一点上，我认为重新审视你的随机选择器逻辑会更好 - 一个接一个地做 4 次（而不是并行做所有 4 个），然后当你拼接时你只做一个拼接和下一个随机（在较小的数组上）保证不重复

【解决方案2】：

我认为您有很多代码重复。但下面我展示了一种随机化任何东西的方法

const someArray = ['a', 'b','с', 'd', 'e', 'f'];

const randomize  = () => {
    const temp = [... someArray]; // create copy
    someArray.sort(() => Math.random() - 0.5); // shuffle
    console.log(someArray.slice(0, 4)) // get first 4 elements
}

randomize();
randomize();
randomize();
randomize();

【讨论】：