javascript - 基于javascript中的randomIndex使三个选择相同

Question

在下面的代码中，我有两个数组items 和notes。 items 是一组带有数字标签的对象，以及与该数字对应的 URL 图片。

notes 数组包含从 1 到 9 编号的图像 URL。

我选择 3 个值作为随机索引，然后基于此我从项目中选择一个label、url，以及一个image 来自笔记。

我试图让三个选择相同，即，

如果随机索引是3，那么..

• 标签应该是3
• 网址应为 https://via.placeholder.com/150x150.jpg?text=image3
• 注意[randomindex] 应该是https://via.placeholder.com/150x150.jpg?text=image3

我怎样才能做到这一点？我必须做出哪些改变？

var randomIndex;
var array2 = [];
   ptagstl = document.querySelectorAll('[name="templabel"]');
   ptagturl = document.querySelectorAll('[name="tempurl"]');
   
   
var items = [
{label:'1',url:'https://via.placeholder.com/150x150.jpg?text=image1'},
{label:'2',url:'https://via.placeholder.com/150x150.jpg?text=image2'},
{label:'3',url:'https://via.placeholder.com/150x150.jpg?text=image3'},
{label:'4',url:'https://via.placeholder.com/150x150.jpg?text=image4'},
{label:'5',url:'https://via.placeholder.com/150x150.jpg?text=image5'},
{label:'6',url:'https://via.placeholder.com/150x150.jpg?text=image6'},
{label: '7',url: 'https://via.placeholder.com/150x150.jpg?text=image7'},
{label:'8',url:'https://via.placeholder.com/150x150.jpg?text=image8'},
{label:'9',url:'https://via.placeholder.com/150x150.jpg?text=image9'}];

var notes = [
'https://via.placeholder.com/75x75?text=1',
'https://via.placeholder.com/75x75?text=2',
'https://via.placeholder.com/75x75?text=3',
'https://via.placeholder.com/75x75?text=4',                                                                                  		      'https://via.placeholder.com/75x75?text=5',
'https://via.placeholder.com/75x75?text=6',
'https://via.placeholder.com/75x75?text=7',
'https://via.placeholder.com/75x75?text=8',
'https://via.placeholder.com/75x75?text=9'];


var tempimages = [];
var notesselected = [];

array2 = items.slice();
var item;

function rvalue() {

for (var index = 0; index < 3; index++)
{
randomIndex = Math.floor(Math.random() *array2.length)

item = array2[randomIndex];
array2.splice(randomIndex, 1);

tempimages.push({data: item,index: randomIndex });
notesselected.push({data: notes[randomIndex],index: randomIndex});
	
ptagstl[index].textContent = item.label;
ptagturl[index].textContent = item.url;
	
console.log(notes[randomIndex]);
	
      }
    }
rvalue();

<p id="demo" name="templabel"></p>
<p id="demo" name="templabel"></p>
<p id="demo" name="templabel"></p>

<p id="demo" style="float:right;" name="tempurl"></p>
<p id="demo" style="float:right" name="tempurl"></p>
<p id="demo" style="float:right" name="tempurl"></p>

Answer 1

“问题”是拼接。

从循环中删除接头可以解决您的问题。但是，也许您不希望能够做出相同的选择，在这种情况下，您应该离开它，而只剩下当前的情况。

当您拼接 array2 并删除 1 项时，从索引到值的匹配会发生变化。例如，如果您将 [1,2,3] 作为数组，然后删除 2，则 [1] 实际上返回 3。这就是您在代码中看到的结果。

您的选择是删除拼接，或改变代码的使用方式。如果你改变它的用途，那么也许只是为笔记切片第二个数组并使用它是一个好主意。

这是一个例子:

var randomIndex;
var array2 = [];
   ptagstl = document.querySelectorAll('[name="templabel"]');
   ptagturl = document.querySelectorAll('[name="tempurl"]');
   
   
var items = [
{label:'1',url:'https://via.placeholder.com/150x150.jpg?text=image1'},
{label:'2',url:'https://via.placeholder.com/150x150.jpg?text=image2'},
{label:'3',url:'https://via.placeholder.com/150x150.jpg?text=image3'},
{label:'4',url:'https://via.placeholder.com/150x150.jpg?text=image4'},
{label:'5',url:'https://via.placeholder.com/150x150.jpg?text=image5'},
{label:'6',url:'https://via.placeholder.com/150x150.jpg?text=image6'},
{label: '7',url: 'https://via.placeholder.com/150x150.jpg?text=image7'},
{label:'8',url:'https://via.placeholder.com/150x150.jpg?text=image8'},
{label:'9',url:'https://via.placeholder.com/150x150.jpg?text=image9'}];

var notes = [
'https://via.placeholder.com/75x75?text=1',
'https://via.placeholder.com/75x75?text=2',
'https://via.placeholder.com/75x75?text=3',
'https://via.placeholder.com/75x75?text=4',                                                                                  		      'https://via.placeholder.com/75x75?text=5',
'https://via.placeholder.com/75x75?text=6',
'https://via.placeholder.com/75x75?text=7',
'https://via.placeholder.com/75x75?text=8',
'https://via.placeholder.com/75x75?text=9'];


var tempimages = [];
var notesselected = [];

array2 = items.slice(); notes2 = notes.slice();
var item;

function rvalue() {

for (var index = 0; index < 3; index++)
{
randomIndex = Math.floor(Math.random() *array2.length)

item = array2[randomIndex];

tempimages.push({data: item,index: randomIndex });
notesselected.push({data: notes2[randomIndex],index: randomIndex});
	
ptagstl[index].textContent = item.label;
ptagturl[index].textContent = item.url;
	
console.log(notes2[randomIndex]);
array2.splice(randomIndex, 1);
notes2.splice(randomIndex, 1);
	
      }
    }
rvalue();

<p id="demo" name="templabel"></p>
<p id="demo" name="templabel"></p>
<p id="demo" name="templabel"></p>

<p id="demo" style="float:right;" name="tempurl"></p>
<p id="demo" style="float:right" name="tempurl"></p>
<p id="demo" style="float:right" name="tempurl"></p>