Question

希望我能解释清楚。

所以我有8个带有.boxA类的盒子，其中包含从js：

生成的数值

<div class="tfooter">
    <div class="boxA" id="bx3" value="3">3</div>
    <div class="boxA" id="bx27" value="27">27</div>
    <div class="boxA" id="bx46" value="46">46</div>
    <div class="boxA" id="bx40" value="40">40</div>
    <div class="boxA" id="bx42" value="42">42</div>
    <div class="boxA" id="bx29" value="29">29</div>
    <div class="boxA" id="bx13" value="13">13</div>
    <div class="boxA" id="bx1" value="1">1</div>
</div>

首先，我将所有值都推送到数组中：

var randomnumber = Math.ceil(Math.random()*50);
var array = [];
$(".boxA").each(function(){
    var dNumber = $(this).attr('value');
    array.push(dNumber);
});

每个方框都包含1到50之间的随机数。

现在，我想生成另一个随机数并检查数组中是否存在。如果存在，则生成另一个数字，直到它在该数组中唯一。何时是唯一的，创建另一个div。

我尝试过使用inArray的indexOf，但是我无法使用它。问题是生成。生成新数字，直到不在数组中。

非常感谢！

Answer 1

首先使用允许的值（即那些未出现在列表中的值）构建数组，然后从中选择一个随机值，就可以避免使用试错法。

这是一个片段，只需按一下按钮，就会在列表顶部添加一个新的（未使用过的）数字：

＆＃13;

function getUsedNumbers() {
    return $(".boxA").map(function(){
        return +$(this).attr('value');
    }).get();
}

function getCandidates(exclude) {
    // Generate a list of values from 0 to 49, and make it a Set
    //   (Sets allow for faster look-up and value removal)
    var candidates = new Set(Array(50).keys());
    for (value of exclude) {
        // Remove the already used value from our Set: 
        candidates.delete(value);
    }
    // Convert Set back to array and return it:
    return [...candidates];
}

function pickRandomly(array) {
    return array[Math.floor(Math.random()*array.length)];
}

$('#add').click(function () {
    var used = getUsedNumbers();
    var candidates = getCandidates(used);
    // Safety:
    if (!candidates.length) {
        alert('No more candidate values available');
        return;
    }
    var choice = pickRandomly(candidates);
    // Insert the selected number at the top of the list:
    $(".tfooter").prepend(
        $("<div>").addClass("boxA").text(choice).attr({
            id: "bx"+choice, value: choice
        })
    );
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="add">Add</button>
<div class="tfooter">
</div>

＆＃13;

如果你反复这样做，那么每次重新读取页面中的值列表都不是那么有效，因为你实际上已经知道它们已经存在了什么。

考虑将candidates Set作为数据的主参考，并且仅依赖于此来生成输出。

Answer 2

您需要使用$.inArray()检查现有数组中是否存在随机数。如果数字不存在，则将该随机数添加到数组中。以下是更新的代码：

＆＃13;

$("#generateNewNumber").on('click', function() {
  var newArray = [];
  $(".boxA").each(function() {
    newArray.push(parseInt($(this).attr('value')));
  });

  var randomNumber = Math.ceil(Math.random() * 50);
  console.log('Random number is: ' + randomNumber);
  if ($.inArray(randomNumber, newArray) !== -1) {
    console.log(randomNumber + ' exisits in array');
  } else {
    newArray.push(parseInt(randomNumber));
    $(".tfooter").append('<div class="boxA" id="bx' + randomNumber + '" value="' + randomNumber + '">' + randomNumber + '</div>')
    console.log(randomNumber + " doesn't exisits in array, hence adding in an array.");
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="generateNewNumber">Generate Random Number</button>
<div class="tfooter">
  <div class="boxA" id="bx3" value="3">3</div>
  <div class="boxA" id="bx27" value="27">27</div>
  <div class="boxA" id="bx46" value="46">46</div>
  <div class="boxA" id="bx40" value="40">40</div>
  <div class="boxA" id="bx42" value="42">42</div>
  <div class="boxA" id="bx29" value="29">29</div>
  <div class="boxA" id="bx13" value="13">13</div>
  <div class="boxA" id="bx1" value="1">1</div>
</div>

＆＃13;

Answer 3

以下是我设置代码的方法：

创建数字为1-50的数组。
根据列表的长度创建一个随机数。
随意拼接一个位置。然后该位置将从数组中删除，但返回一个包含一个项目的数组。
如果数组为空（长度为0），请从1开始。

然后你不需要检查数字是否存在，因为它已经从数组中删除了。

function createBoxNumbersArray(startNumber, endNumber) {
  var boxNumbers = [];

  for (var i = startNumber; i <= endNumber; i++) {
    boxNumbers.push(i);
  }

  return boxNumbers;
}

function getRandom(boxNumbers) {
  position = Math.floor((Math.random() * boxNumbers.length-1));

  return boxNumbers.splice(position, 1)[0];
}

var boxNumbers = createBoxNumbersArray（1,50）;

var randomBoxNumber = getRandom（boxNumbers）;

Answer 4

看起来像indexOf将是要走的路。您的问题是您可能将HTML属性值（字符串）与随机数（数字）进行比较。

所以，一旦你更新到：

  array.push(parseInt(dNumber));

您可以查看

  if(array.indexOf(randomnumber) >= 0) { } // regenerate random

生成不在数组中的随机数

4 个答案: