时间戳

首页 > 解决方案 > 从数组中选择随机项（成对显示）并删除它，一旦数组为空就重新启动

javascript - 从数组中选择随机项（成对显示）并删除它，一旦数组为空就重新启动

问题描述

我是编码的超级新手，我需要帮助来实现此代码。我正在尝试从数组中获取一个随机项（成对），然后从该数组中删除它，直到用户到达最后一项或使用该服务（cookie？）已经过去了 60 天......我已经建立了一个在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>`

谢谢您的帮助！

标签： javascriptarrayswordpressrandom

解决方案

我不完全理解您所说的“成对删除”是什么意思，但我会假设您的意思是您希望在删除以 结尾的图像02F.jpg的同时删除以 结尾的图像02B.jpg，然后03F.jpg与03B.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的位置移除 1 个对象myIndexToDeleteFrom，您可能会随机选择该对象。myRandomlyRemovedObject将分配给我们删除的一个对象。

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

推荐阅读