Как я могу выбрать любой тег <a>на своей странице, чтобы присвоить ему имя класса? - PullRequest
0 голосов
/ 28 апреля 2020

У меня есть игровая доска с тегами <a> для игры. У каждого из них есть идентификатор, основанный на их значениях сетки x / y, и я назначил им несколько изображений, используя jQuery, чтобы выбрать конкретные c идентификаторы, а затем добавил классы, чтобы поместить изображения в них.

Однако Я хотел бы выбрать случайный тег <a> для добавления класса, а не к указанному c идентификатору, как я могу сделать это, используя jQuery?

$("#tile0-0").addClass("Jim")
$("#tile2-2").addClass("crystal")
$("#tile5-1").addClass("snowman")
$("#tile6-9").addClass("snowman")
$("#tile2-5").addClass("snowman")
$("#tile3-3").addClass("snowballs")
$("#tile9-1").addClass("tree")
$("#tile4-7").addClass("gun")

Ответы [ 3 ]

2 голосов
/ 28 апреля 2020

Вы можете выбрать все a теги с tile... идентификаторами, затем выбрать случайный элемент из этого списка и добавить класс:

function addClassToRandomTile(classname) {
  const tiles = document.querySelectorAll('a[id^="tile"]');
  const choice = Math.floor(Math.random() * tiles.length);
  tiles[choice].classList.add(classname);  
}

addClassToRandomTile('Jim');
.Jim {
  background-color: yellow;
}
<a id=tile0-0>0-0</a>
<a id=tile2-2>2-2</a>
<a id=tile5-1>5-1</a>

или эквивалент jQuery:

function addClassToRandomTile(classname) {
  const tiles = $('a[id^="tile"]');
  const choice = Math.floor(Math.random() * tiles.length);

  $(tiles[choice]).addClass(classname);
}

addClassToRandomTile('Jim');
.Jim {
  background-color: yellow;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<a id=tile0-0>0-0</a>
<a id=tile2-2>2-2</a>
<a id=tile5-1>5-1</a>
2 голосов
/ 28 апреля 2020

Функция потока должна быть, 1. Получить все элементы, имеющие ID, начинается с «title» 2. Выберите случайный элемент из списка 3. Добавьте класс к этому случайно выбранному элементу.

function addRandomClass(className) {
  var elems = $("a[id^='tile']"); /*Select all elements which have ID starts with 'tile'*/
  var randomValue = Math.floor(Math.random() * elems.length); /*Pick a random number between 0 and (no of elements -1)*/
  elems[randomValue].addClass(className);/*Add Class to the selected random element*/
}

Вышеприведенную функцию можно использовать как

addRandomClass("spec-elem"); /*class 'spec-elem' will be added to the random element */
1 голос
/ 28 апреля 2020

Скелет будет

var obj = $("#title0-0, #title2-2, ...");
var elem = $(obj.get(randomElementIndex)).addClass('foo');

Вы также можете указать все элементы, из которых вы хотите выбрать, при рандомизации общего класса, а затем просто наберите

var obj = $(".myCommonTileClass");
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...