如何在页面上选择任何<a>标签以为其分配类名？

Question

我有一块瓷砖板，它们是游戏的<a>标签。它们每个都有一个基于x/y网格值的id，我通过使用jQuery选择特定的id，然后添加类将图像放在这些id上，为它们分配了一些图像。

然而，我想选择一个随机的<a>标记来添加类，而不是选择一个特定的id，我如何使用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")

Answer 1

您可以选择所有具有tile...ID的a标签，然后从该列表中选择一个随机元素并添加类：

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>

Answer 2

函数流应该是，
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 */

Answer 3

骨架将是

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

你也可以决定在随机化一个公共类时，给出你想从中选择的所有元素，然后只做

var obj = $(".myCommonTileClass");