如何获取现有输入值，将它们随机化并放回去

Question

我有两个按钮，一个用于重置输入字段，另一个用于随机值。我有以下javascript代码将输入字段重置为空白，并且工作正常。

    $(".reset").click(function() {
        $(this).closest('form').find("input[type=text], textarea").val("");
    });

现在，我想从输入字段中获取所有值，将它们随机化然后放回去。每次点击时，数字都会不同。

这是输入字段的HTML。

    <input type="text" name="seed[]" value="1" id="name" class="form-control">
    <input type="text" name="seed[]" value="2" id="name" class="form-control">
    <input type="text" name="seed[]" value="3" id="name" class="form-control">
    <input type="text" name="seed[]" value="4" id="name" class="form-control">

Answer 1

这样的事情怎么样？

function shuffle(a) {
    for (let i = a.length - 1; i > 0; i--) {
        const j = Math.floor(Math.random() * (i + 1));
        [a[i], a[j]] = [a[j], a[i]];
    }
    return a;
}

$(".random").click(function() {
    let vals = $("input[name='seed[]'], textarea").map(function(){return $(this).val();}).get();
    vals = shuffle(vals);
    $.each($("input[name='seed[]'], textarea"), function(i,val){
        $(this).val(vals[i]);
    })
    console.log(vals)
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" name="seed[]" value="1" id="name" class="form-control">
    <input type="text" name="seed[]" value="2" id="name" class="form-control">
    <input type="text" name="seed[]" value="3" id="name" class="form-control">
    <input type="text" name="seed[]" value="4" id="name" class="form-control">
<button class="random">random</button>

Answer 2

Math.random()生成[0, 1)范围内的随机浮点数。 Math.floor(Math.random() * n)将为您提供[0, n-1]范围内的整数。使用此功能可随机播放值。通常，要就地简单地完全随机化n值，请使用取自i的随机值对每个值[i, n]进行迭代和交换：

let sorted = [1, 2, 3, 4, 5];

let shuffled = [...sorted];
for (let i = 0; i < shuffled.length; i++) {
  let randIndex = i + Math.floor(Math.random() * (shuffled.length - i));
  let t = shuffled[randIndex];
  shuffled[randIndex] = shuffled[i];
  shuffled[i] = t;
}

console.log(shuffled);

Answer 3

首先，您输入元素的ID应该是唯一的。

<input type="text" name="seed[]" value="1" id="nameA" class="form-control">
<input type="text" name="seed[]" value="2" id="nameB" class="form-control">
<input type="text" name="seed[]" value="3" id="nameC" class="form-control">
<input type="text" name="seed[]" value="4" id="nameD" class="form-control">

使用函数document.getElementsByTagName("input")，将获得所有输入文本字段的数组。 现在，只需遍历该数组即可获取每个输入元素的值，并将其存储在一个临时数组中。之后，将数组中的元素随机化，最后为每个输入元素分配一个数组之外的值。

var list = document.getElementsByTagName("input");
var values = [];

for (var a = 0; a < list.length; a++) {
  values.push(list[a].value);
}
values.sort(function() {
  return 0.5 - Math.random()
});

for (var a = 0; a < list.length; a++) {
  list[a].value = values[a];
}

<input type="text" name="seed[]" value="1" id="nameA" class="form-control">
<input type="text" name="seed[]" value="2" id="nameB" class="form-control">
<input type="text" name="seed[]" value="3" id="nameC" class="form-control">
<input type="text" name="seed[]" value="4" id="nameD" class="form-control">

Answer 4

单线尝试：

$.each($("input[type='text']").map((index, element) => $(element).val()).get().sort(() => Math.random() - 0.5), (i, value) => { $("input[type='text']").eq(i).val(value); });

这是一个片段：

$(".click").click(() => {
  $.each($("input[type='text']").map((index, element) => $(element).val()).get().sort(() => Math.random() - 0.5), (i, value) => { $("input[type='text']").eq(i).val(value); });
  return false;
});

<script src="https://code.jquery.com/jquery-3.4.0.slim.min.js"></script>
<input type="text" name="seed[]" value="1" id="nameA" class="form-control">
<input type="text" name="seed[]" value="2" id="nameB" class="form-control">
<input type="text" name="seed[]" value="3" id="nameC" class="form-control">
<input type="text" name="seed[]" value="4" id="nameD" class="form-control">

<a class="click" href="#">Click me</a>

更新：正如@junvar的评论中所提到的，这确实不是数组的真正随机洗牌。如果确实需要真正的随机分组，则可以扩展为使用https://material-ui-pickers.dev/之类的东西，而在其他答案中已经提到了这一点：

function shuffle(a) {
  for (let i = a.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    [a[i], a[j]] = [a[j], a[i]];
  }
  return a;
}

$.each(shuffle($("input[type='text']").map((index, element) => $(element).val()).get()), (i, value) => { $("input[type='text']").eq(i).val(value); });

Answer 5

可以简单地使用普通的javascript完成此操作。 我创建了一个样本矮人 here