Jquery / Javascript给出一类四个按钮四个不同的随机数

Question

我有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>

Answer 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    
   });
})

Answer 2

你迭代，计算randoms和设置值的方式是不正确的。

• 使用类.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>

Answer 3

当你做var crystal= $(".diamond");时，它意味着可变晶体将具有className'diamond'的所有元素

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

你需要做的就是

替换它

var crystal= $(".diamond");

有了这个

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

Answer 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>