Question

我有一个array arr[]，其中包含18个值，我有6个类，其p段的ID值是

我需要从arr[]中随机取六个值并显示为“ x”。

我该如何实现？

<script>
var arrayVariable = ['one','two','three','four','five','six','seven','eight','nine','ten','eleven','twelve','thirteen','fourteen','fifteen','sixteen','seventeen','eighteen',]
  arrayLength = arrayVariable.length;

for (i = 0; i < arrayLength; i++) {
  
}
</script>

.ab {
  float: left;
  width: 50px;
  height: 50px;
  border: 1px solid black;
  border-radius: 10%;
  background-color: #42e0fd;
  font: "Courier New", Courier, monospace;
  font: 70px;
  ;
  color: #FFFFFF;
  font-size: xx-small;
  font-weight: 900;
  text-align: center;
}

<div class="ab"><p id="values">x </p></div>
<div class="ab"><p id="values"> x</p></div>
<div class="ab"><p id="values"> x</p></div>
<div class="ab"><p id="values"> x</p></div>
<div class="ab"><p id="values"> x</p></div>
<div class="ab"><p id="values"> x</p></div>

Answer 1

那些应该独一无二吗？如果是：

var places = document.querySelector('.ab>values')
var arrayVariable = ['one','two','three','four','five','six','seven','eight','nine','ten','eleven','twelve','thirteen','fourteen','fifteen','sixteen','seventeen','eighteen']
places.forEach(function (place) {
  var index = Math.floor(Math.random() * arrayVariable.length)
  place.innerText = arrayVariable[index]
  arrayVariable.splice(index, 1)
})

Answer 2

我正在复制初始数组，然后对于要插入随机数组元素的每个DOM元素，我从临时数组中拾取一个元素，然后将其插入DOM。为了使数据唯一，我从临时数组中删除了选择的数据。

const arrayVariable = ['one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine', 'ten', 'eleven', 'twelve', 'thirteen', 'fourteen', 'fifteen', 'sixteen', 'seventeen', 'eighteen'];

// Get random number
function getRandom(max) {
  return Math.floor(Math.random() * 10);
};

// Select a random value from the initial array
function getRandomFromArray(array) {
  const random = getRandom(array.length - 1);

  const value = array[random];

  array.splice(random, 1);

  return value;
}

const tmp = [
  ...arrayVariable,
];

// Treat each bloc
$('.ab').each(function() {
  const value = getRandomFromArray(tmp);

  $(this).html(value);
});

.ab {
  float: left;
  width: 10em;
  height: 10em;
  border: 1px solid black;
  border-radius: 10%;
  background-color: #42e0fd;
  font: "Courier New", Courier, monospace;
  font: 70px;
  color: #FFFFFF;
  font-weight: 900;
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ab">
  <p id="values">x </p>
</div>

<div class="ab">
  <p id="values"> x</p>
</div>

<div class="ab">
  <p id="values"> x</p>
</div>

<div class="ab">
  <p id="values"> x</p>
</div>

<div class="ab">
  <p id="values"> x</p>
</div>

<div class="ab">
  <p id="values"> x</p>
</div>

Answer 3

请确保您的ID在文档中唯一。检查w3org文档here

您可以将<p>标签的name属性用作<p name="values">x</p>

然后使用以下JS实现您的结果。

检查JS Fiddle

var arrayVariable = ['one','two','three','four','five','six','seven','eight','nine','ten','eleven','twelve','thirteen','fourteen','fifteen','sixteen','seventeen','eighteen',]
arrayLength = arrayVariable.length;
  
ptags = document.getElementsByName("values");

for(i=0;i<ptags.length;i++){
  ptags[i].innerHTML = arrayVariable[Math.floor(Math.random() * arrayLength)];
}

Answer 4

您可以随机整理数组，然后连续获取数组的六个值。

功能随机播放：

/**
 * Shuffles array in place.
 * @param {Array} a items An array containing the items.
 */
 function shuffle(a) {
   var j, x, i;
   for (i = a.length - 1; i > 0; i--) {
     j = Math.floor(Math.random() * (i + 1));
     x = a[i];
     a[i] = a[j];
     a[j] = x;
   }
   return a;
 }

实施：

var places = document.querySelector('.ab>values')
var arrayVariable = ['one','two','three','four','five','six','seven','eight','nine','ten','eleven','twelve','thirteen','fourteen','fifteen','sixteen','seventeen','eighteen']
shuffle(arrayVariable);
places.forEach(function (place) {
  place.innerText = arrayVariable.pop();
})

参考：Array shuffle

从数组随机获取值到类

4 个答案: