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

当您执行var crystal= $(".diamond");时，它意味着可变晶体将具有className＆＃39;钻石＆＃39;

的所有元素

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

您需要做的就是

替换此

var crystal= $(".diamond");

用这个

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

Answer 3

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 4

jQuery将在您运行时为您执行implicit interation，

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

因为crystal包含多个元素。

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

4 个答案: