从Array中选择Random Item (成对显示)并将其删除，Array为空后重新启动

Question

我是一个超级新手在编码，我需要帮助来实现这个代码。我正在尝试从数组中随机获取一个项目(成对)，然后将其从该数组中删除，直到用户到达最后一个项目或60天内不再使用该服务(cookie？)……我已经在stackoverflow中的其他问题的帮助下构建了一个脚本，这是我到目前为止的结果。

`<script>
var randomizer = document.getElementById("getImgBut");
var dog1 = '/app/wp-content/mediaApp/yo-creo-mi-realidad/01F.jpg';
var dog2 = '/app/wp-content/mediaApp/yo-creo-mi-realidad/01B.jpg';
var dogpics=[dog1,dog2];

var yourPics = [
  dogpics,
[   '/app/wp-content/mediaApp/yo-creo-mi-realidad/02F.jpg', '/app/wp-content/mediaApp/yo-creo-mi-realidad/02B.jpg'   ],
[   '/app/wp-content/mediaApp/yo-creo-mi-realidad/03F.jpg', '/app/wp-content/mediaApp/yo-creo-mi-realidad/03B.jpg'   ],
[   '/app/wp-content/mediaApp/yo-creo-mi-realidad/04F.jpg', '/app/wp-content/mediaApp/yo-creo-mi-realidad/04B.jpg'   ],
[   '/app/wp-content/mediaApp/yo-creo-mi-realidad/05F.jpg', '/app/wp-content/mediaApp/yo-creo-mi-realidad/05B.jpg'   ],
[   '/app/wp-content/mediaApp/yo-creo-mi-realidad/06F.jpg', '/app/wp-content/mediaApp/yo-creo-mi-realidad/06B.jpg'   ] //This array has 52 cards but I cutted it for example purposes
];

function get_random_number(array){
    return Math.floor(Math.random() * array.length |0);
}  // here is where I have tried to modify with other scripts like the one in this page https://stackoverflow.com/questions/38882487/select-random-item-from-array-remove-it-restart-once-array-is-empty with no success

randomizer.addEventListener("click", function() {
var rand_number = get_random_number(yourPics);
console.log(rand_number);
document.getElementById('img1').src = yourPics[rand_number][0];
document.getElementById('img2').src = yourPics[rand_number][1];
});

var card = document.querySelector('.card');
card.addEventListener( 'click', function() {
  card.classList.toggle('is-flipped');
});
</script>`

谢谢你的帮助!

Answer 1

我不完全理解你说的“成对删除”是什么意思，但我会回答，假设你的意思是你希望在删除以02B.jpg结尾的图像的同时删除以02F.jpg结尾的图像，然后在删除以03B.jpg结尾的图像的同时删除03F.jpg。

我将提出的解决方案是，我们将从一开始就以不同的方式组织您的数据。也就是说，如果这些图像，"B图像“和"F图像”是链接的，我们可以将它们保存在相同的`javascript object中。这看起来像这样：

var yourPics = [
  {
    bImage: '/app/wp-content/mediaApp/yo-creo-mi-realidad/02F.jpg', 
    fImage: '/app/wp-content/mediaApp/yo-creo-mi-realidad/02B.jpg'
  },
  {
    bImage: '/app/wp-content/mediaApp/yo-creo-mi-realidad/03F.jpg', 
    fImage: '/app/wp-content/mediaApp/yo-creo-mi-realidad/03B.jpg'
  }...]

这将是一个由对象组成的数组，而不是字符串。我们可以使用下面的命令来访问对象的bImage属性

myObject = yourPics[0]
myObject.bImage 

我们可以通过splice随机删除其中一个对象。

myRandomlyRemovedObject = yourPics.splice(myIndexToDeleteFrom, 1)将从yourPics中的myIndexToDeleteFrom位置删除一个对象，您可能会随机选择该对象。myRandomlyRemovedObject将被分配给我们删除的一个对象。

我认为这种基于对象的方法更安全，因为你会知道你会同时删除两个匹配的字符串。