Как я могу добавить класс из массива из 4 классов, пока не будут израсходованы все классы?

Question

У меня есть таблица на моей странице html.

У меня есть while l oop, который запускается четыре раза, а затем дает четыре случайные ячейки class из weapon, как вы можно увидеть ниже. Это сделает их оранжевыми.

$(document).ready(function() {

  var body = document.getElementsByTagName("body")[0];
  var table = document.createElement('TABLE');
  var tblB = document.createElement('TBODY');
  table.appendChild(tblB);

  $("td").addClass('empty');




  for (var i = 0; i < 10; i++) {
    var tr = document.createElement('TR');
    tblB.appendChild(tr);
    $(tr).attr('data-x', i)

    for (var j = 0; j < 10; j++) {
      var td = document.createElement('TD');
      tr.appendChild(td);

      $(td).attr('data-y', j);
    }

  }
  body.appendChild(table);



  var weapons = 0;


  while (weapons < 4) {
    var randomRow = Math.floor((Math.random() * 9) + 1);
    var randomCol = Math.floor((Math.random() * 9) + 1);

    var randomCellNew = $($("tr[data-x=" + randomRow + "] > td[data-y=" + randomCol + "]"));
    if (randomCellNew.hasClass('empty') === true && randomCellNew.hasClass('dimmed') === false) {
      randomCellNew.addClass('weapon').removeClass('empty');
      weapons++
    }
  }

})

table td {
  padding: 25px;
  border: 5px solid red;
  background-image: url('image.png');
  background-size: 100%;
}

table {
  margin: auto;
  position: relative;
}

.weapon {
  background: orange;
  opacity: 0.5;
}

.snowballs {
  background-image: url("snowball.png");
  background-size: contain;
  /* <------ */
  background-repeat: no-repeat;
  background-position: center center;
  -webkit-box-shadow: 0 0 5px 2px yellow;
  -moz-box-shadow: 0 0 5px 2px yellow;
  box-shadow: 0 0 5px 2px yellow;
  position: absolute;
}

.gun {
  background-image: url("gun.png");
  background-size: contain;
  /* <------ */
  background-repeat: no-repeat;
  background-position: center center;
  /* box-shadow: 3px 3px 3px 3px yellow; */
  -webkit-box-shadow: 0 0 5px 2px yellow;
  -moz-box-shadow: 0 0 5px 2px yellow;
  box-shadow: 0 0 5px 2px yellow;
  position: absolute;
}

.nunchucks {
  background-image: url("nunchucks.jpg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  -webkit-box-shadow: 0 0 5px 2px yellow;
  -moz-box-shadow: 0 0 5px 2px yellow;
  box-shadow: 0 0 5px 2px yellow;
  position: absolute;
}

.ninjastar {
  background-image: url("ninjastar.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  -webkit-box-shadow: 0 0 5px 2px yellow;
  -moz-box-shadow: 0 0 5px 2px yellow;
  box-shadow: 0 0 5px 2px yellow;
  position: absolute;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Вместо того, чтобы давать им один и тот же класс, я хотел бы дать им 4 отдельных класса, чтобы они содержали 4 изображения, по одному каждое. Таким образом, l oop запускается, а затем одно за другим помещает одно из четырех изображений в 4 случайные ячейки, пока не будут использованы все 4 класса.

Я пытался использовать :nth of type в CSS, но это не помогло не работает должным образом. Есть другой способ? Я думал о цикле по массиву классов, но не знал, как это решить.

Как я могу решить эту проблему, все еще используя статус if и randomCellNew variable? Между прочим, все это происходит при загрузке страницы без функции щелчка или какой-либо другой функции.

Если приведенный выше код не работает, у меня он https://jsfiddle.net/johnroiste/y2qktb8z/4/

Answer 1

Вы можете попробовать сделать это с помощью массива:

var classes = ['snowballs', 'gun', 'nunchucks', 'ninjastar'];

var weapons = 0;
//////Trying to use a while or for loop to place an additional 4 orange squares on the table using a similar method to the one for obs/dimmed

while (weapons < 4) {
  var randomRow = Math.floor((Math.random() * 9) + 1);
  var randomCol = Math.floor((Math.random() * 9) + 1);

  var randomCellNew = $($("tr[data-x=" + randomRow + "] > td[data-y=" + randomCol + "]"));
  if (randomCellNew.hasClass('empty') === true && randomCellNew.hasClass('dimmed') === false) {
    randomCellNew.addClass(classes[weapons]).removeClass('empty');
    weapons++
    // console.log(randomNum + randomCol);
  }
}