Jquery/Javascript 为一类四个按钮提供四个不同的随机数答案

【问题标题】：Jquery/Javascript giving one class of four buttons four different random numbersJquery/Javascript 为一类四个按钮提供四个不同的随机数
【发布时间】：2018-03-05 09:27:43
【问题描述】：

我有 4 个按钮，我想让每个按钮在单击时生成一个随机数。随机数是通过 for 循环和 math.random 生成的，但我将它分配给我的班级，并且由于所有按钮上的班级都是相同的，所有 4 个按钮只得到一个数字，但是当我控制台记录它时，有 4 个随机数出现的数字

for(var i = 0; i < 4; i++){
    var random = Math.floor(Math.random() * 11)+1;
   console.log(random);
    var crystal= $(".diamond");
    crystal.attr({
        "data-random": random    
    });

<div class="buttons">
<button class="diamond" id="red" >Red</button>
<button class="diamond" id="blue"> Blue </button>
<button class="diamond" id="yellow">Yellow</button>
<button class="diamond" id="green">Green</button>
</div>

【问题讨论】：

为什么要有for循环？

标签： javascript jquery html class random

【解决方案1】：

我有 4 个按钮，我想让每个按钮随机生成一个点击时的数字。

crystal.attr 将为所有匹配设置相同的属性。

你需要替换这一行

var crystal= $(".diamond");

与

var crystal= $(event.currentTarget);

或

var crystal= $( this );

或者，如果您想在每次点击时生成 4 个新的随机数并为所有这些随机数分配一个，然后使用 each

$(".diamond").each( function(){
   var random = Math.floor(Math.random() * 11)+1;
   $(this).attr({
        "data-random": random    
   });
})

【讨论】：

【解决方案2】：

您迭代、计算随机数和设置值的方式不正确。

循环使用类.diamond的所有元素
在每次迭代中生成一个随机数。
设置this元素的属性。

var crystal = $(".diamond");
crystal.each(function() {
  var random = Math.floor(Math.random() * 11) + 1;
  console.log(random);
  $(this).attr({
    "data-random": random
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="buttons">
  <button class="diamond" id="red">Red</button>
  <button class="diamond" id="blue"> Blue </button>
  <button class="diamond" id="yellow">Yellow</button>
  <button class="diamond" id="green">Green</button>
</div>

【讨论】：

【解决方案3】：

当你在做var crystal= $(".diamond"); 时，这意味着变量水晶将包含所有类名称为“钻石”的元素

您想要的是该索引处的特定元素...所以您可以使用 jQuery eq() 函数来做到这一点。

你需要做的就是

替换这个

var crystal= $(".diamond");

有了这个

var crystal= $(".diamond").eq(i);

【讨论】：

【解决方案4】：

当你运行时，jQuery 会为你做一个implicit interation，

crystal.attr({
    "data-random": random    
})

因为crystal 包含多个元素。

因此，对于每个for 迭代，您将运行 4 次内部迭代，即为同一数字设置 4 次属性。

      var crystal= document.querySelectorAll('.diamond')
      Array.prototype.forEach.call(crystal, cr => {
        let random = Math.floor(Math.random() * 11) + 1
        cr.setAttribute('data-random', random)
      })

<div class="buttons">
    <button class="diamond" id="red" >Red</button>
    <button class="diamond" id="blue"> Blue </button>
    <button class="diamond" id="yellow">Yellow</button>
    <button class="diamond" id="green">Green</button>
</div>

【讨论】：