Рандомно добавить класс

243

10 апреля 2017, 04:19

$(".rows .cell").click(function(e) { 
  e.preventDefault(); 
  if ($(this).parent().hasClass("row-5")) { 
    $(this).addClass('success'); 
  } 
})

.cell { 
  background: #000; 
  height: 60px; 
  width: 60px; 
} 
 
.success { 
  background: green; 
} 
 
.danger { 
  background: red; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="rows"> 
  <div class="row row-5"> 
    <button class="cell" data-row="5"></button> 
    <button class="cell" data-row="5"></button> 
    <button class="cell" data-row="5"></button> 
    <button class="cell" data-row="5"></button> 
    <button class="cell" data-row="5"></button> 
  </div> 
</div>

Задача: надо сделать так, чтобы после нажатия на одну из кнопок, рандомно в одну из кнопок добавлялся класс danger (в рандом не включаем кнопку с классом success).

Answer 1

$('.rows .cell').on('click', function(e) {
  e.preventDefault();
  var random = Math.floor(Math.random()*10);
  $(this).addClass('success');
  var collect = $('.cell').not('.success').not('.danger'); // Берем коллекцию, исключая success и danger классы
  collect.eq(Math.floor(Math.random() * collect.length)).addClass('danger'); // рандомим и добавляем
});

Добавил от себя .not('.danger') , думаю, что это то, что нужно. Рандом взял отсюда http://stackoverflow.com/questions/3614944/how-to-get-random-element-in-jquery

Answer 2

$(".rows .cell").click(function(e) { 
  e.preventDefault(); 
  if ($(this).parent().hasClass("row-5")) { 
    $(this).addClass('success'); 
    addDanger(); 
  } 
}); 
 
function addDanger() { 
  //* Получаем доступные ячейки 
  var availableCells = $('.row-5 .cell').not('.success'); 
  //* Генерируем случайный индекс 
  var randomIndex = Math.floor(Math.random() * availableCells.length); 
  //* Навешиваем класс случайной ячейке 
  availableCells.eq(randomIndex).addClass('danger'); 
}

.cell { 
  background: #000; 
  height: 60px; 
  width: 60px; 
} 
 
.success { 
  background: green; 
} 
 
.danger { 
  background: red; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="rows"> 
  <div class="row row-5"> 
    <button class="cell" data-row="5"></button> 
    <button class="cell" data-row="5"></button> 
    <button class="cell" data-row="5"></button> 
    <button class="cell" data-row="5"></button> 
    <button class="cell" data-row="5"></button> 
  </div> 
</div>