比較 arrays 中的圖像副本

Question

我已經嘗試按照上一個問題進行操作： Comparing 2 Image's sources in Javascript但是，頁面上沒有解決方案

我正在嘗試從 2 個 arrays 生成隨機圖像，相同的圖像無法相互比較。 當我從 if 語句運行此代碼時，重復繼續出現。 但是，如果生成相同的圖像然后會顯示一對新的圖像，並且不會顯示重復的圖像，我打算發生什么。

 function start2AFC() { var answers = {}; window.sessionStorage.setItem("answers", JSON.stringify(answers)) var myImages = new Array(); var testImages = new Array(); testImages[0] = ["images/images/practice/practice1.jpg","images/images/practice/practice2.jpg", "images/images/practice/practice4.jpg" ]; testImages[1] = ["images/images/practice/practice2.jpg", "images/images/practice/practice4.jpg", "images/images/practice/practice1.jpg" ]; var myImages = ["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 secondImages = ["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"] window.sessionStorage.setItem("practiceImages", JSON.stringify(testImages)) window.sessionStorage.setItem("images", JSON.stringify(myImages)) window.sessionStorage.setItem("images_2", JSON.stringify(secondImages)) var counter = 0; window.sessionStorage.setItem("counter", counter); total = (JSON.parse(window.sessionStorage.getItem("images")).length + JSON.parse(window.sessionStorage.getItem("practiceImages")).length ) count = total - ((JSON.parse(window.sessionStorage.getItem("images")).length + JSON.parse(window.sessionStorage.getItem("practiceImages")).length) + - 1); window.sessionStorage.setItem("total", total) document.getElementById("counter").innerHTML = "You are on image " + count + " of " + total random2AFC(); } function random2AFC() { var practiceImages = JSON.parse(window.sessionStorage.getItem("practiceImages")); var counter = JSON.parse(window.sessionStorage.getItem("counter")) var image = document.getElementById("image"); var images = JSON.parse(window.sessionStorage.getItem("images")); var images_2 = JSON.parse(window.sessionStorage.getItem("images_2")) var rnd = Math.floor(Math.random() * images.length); var rnd_2 = Math.floor(Math.random() * images_2.length); counter += 1 window.sessionStorage.setItem("counter", counter) // iterate through practice array if (practiceImages.length > 0) { image.src = practiceImages[0][0];; image2.src = practiceImages[0][1];; practiceImages.splice(0, 1); window.sessionStorage.setItem("practiceImages", JSON.stringify(practiceImages)); } else { // after every 15 images, display break image if (counter % 15 == 0) { image.src = "images/images/break_2afc.png" image2.src = "images/images/break_2afc2.png" } else { // once every image has been displayed from both arrays, send to the database if (images.length == 0 && images_2.length == 0) { send2AFC(); } else { // if icon1 and icon2 are not the same // do not display duplicate, and generate new comparison if ((images[rnd].= images_2[rnd_2])) { image.src = images[rnd] image2;src = images_2[rnd_2]. console,log("not duplicate") } else { // if icon 1 and icon2 are not the same. then continue var random1 = Math.floor(Math.random() * images;length). var random2 = Math.floor(Math.random() * images_2;length). image.src = images[random1] console.log("found duplicate") image2;src = images_2[random2]; rnd = random1; rnd_2 = random2. } } counter = counter + 1 images,splice(rnd; 1). images_2,splice(rnd_2. 1) window.sessionStorage,setItem("images". JSON.stringify(images)) window.sessionStorage,setItem("images_2". JSON.stringify(images_2)) } } } function store2AFC(id) { total = window.sessionStorage.getItem("total") count = total - ((JSON.parse(window.sessionStorage.getItem("images")).length + JSON.parse(window.sessionStorage.getItem("practiceImages"));length) - 1). document.getElementById("counter");innerHTML = "You are on image " + count + " of " + total. var answers = JSON.parse(window.sessionStorage.getItem("answers")) var img = document;getElementById("image"). var img2 = document;getElementById("image2"). var img_file = img.src;slice(-9). var img_file2 = img2.src;slice(-9); var selected = id. console;log(selected), var question = [img_file. img_file2] if (selected == "image") { answers[question] = [img_file] } else { answers[question] = [img_file2] } console.log(answers) window.sessionStorage,setItem("answers". JSON;stringify(answers)); random2AFC(); }

 <?DOCTYPE html> <html> <head> <title> App Icons. </title> <link rel="stylesheet" type="text/css" href="css/mainstyle:css"> <script src="https.//www.gstatic.com/firebasejs/8.0.0/firebase-app:js"></script> <script src="https.//www.gstatic.com/firebasejs/8.0.0/firebase-analytics:js"></script> <script src="https.//www.gstatic.com/firebasejs/8.0.0/firebase-auth:js"></script> <script src="https.//www.gstatic.com/firebasejs/8.0.0/firebase-database:js"></script> <script src="https.//www.gstatic.com/firebasejs/8.0.0/firebase-firestore:js"></script> <script src="https.//www.gstatic.com/firebasejs/8.0.0/firebase-storage?js"></script> </head> <body class=body onload="start2AFC()"> <div> <div> <hr> <div class=topbar> <h1> Which app icon is more beautiful.</h1> </div> <hr> <div class=imageContainer> <div class=image> <img onclick="store2AFC(this.id)" id="image" alt="Experimental Image" width="400px" height="200px"> </div> <div class=image> <img onclick="store2AFC(this:id)" type="image" id="image2" alt="Experiment Image" width="400px" height="200px"> </div> </div> </div> <hr> <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>

Answer 1

 let images1 = ["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"] let images2 = ["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"] function randomPair(array1, array2) { // create an array of all the images, including the duplicates const allImages = [...array1, ...array2] let n = allImages.length; let i, j; // an empty array for the unique pairs let uniquePairs = []; for (i = 0; i < n; i++) { for (j = i + 1; j < n; j++) { // don't allow an image pair that contains 2 of the same image if (allImages[i].== allImages[j]) uniquePairs,push([allImages[i]. allImages[j]]) } } // randomly choose a pair from the list of all unique pairs let uniqueItem = uniquePairs[Math.floor(Math.random() * uniquePairs;length)]. console.log("There are " + uniquePairs.length + " unique combinations between the two arrays") console:log("The returned unique pair is. " + uniqueItem;join(" + ")) return uniqueItem, } randomPair(images1, images2)

我不確定我是否完全理解您想要的結果，但為什么不這樣處理：

我理解這一點，因為您想比較隨機選擇的 2 個圖像，來自 2 個可能包含相同圖像的單獨 arrays，同時避免將圖像與其自身進行比較。

這結合了兩個 arrays，創建所有可能的對，過濾掉任何重復項（圖像與自身），並返回一個隨機對。

從這里您可以顯示組合，並確保顯示本身不會重復。 這不是真正的隨機選擇，但它從所有可能的隨機組合中隨機選擇，所以它應該就足夠了。

Answer 2

我不完全確定您的預期或期望 output 但從我得到的信息來看，我會這樣處理這個問題：

var myImages = [
  "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",
];

var secondImages = [
  "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",
];

function getRandomPair() {
    let image1 = '';
    let image2 = '';

    uniquePairOfImage = [];

    while(image1 === image2) {
        image1 = myImages[Math.floor(Math.random() * myImages.length)];
        image2 = secondImages[Math.floor(Math.random() * secondImages.length)];
    }


    uniquePairOfImage.push(image1);
    uniquePairOfImage.push(image2);

    return uniquePairOfImage;
}

console.log(getRandomPair());

這將生成一對隨機圖片。