У меня есть 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>
0
Phoenix Werth 5 Мар 2018 в 12:27

4 ответа

Лучший ответ

У меня есть 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    
   });
})
1
gurvinder372 5 Мар 2018 в 09:31

Когда вы делаете var crystal= $(".diamond");, это означает, что переменная crystal будет иметь все элементы с className 'diamond'

Вам нужен конкретный элемент в этом индексе ... Так что вы можете сделать это с помощью функции jQuery eq().

Все, что вам нужно сделать, это

Замени это

var crystal= $(".diamond");

С этим

var crystal= $(".diamond").eq(i);
0
Kenny 5 Мар 2018 в 09:38

То, как вы выполняли итерацию, вычисляло случайности и устанавливало значение, было неверным.

  • Цикл по всем элементам с классом .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>
0
void 5 Мар 2018 в 09:34

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>
0
Jacob 5 Мар 2018 в 09:50