从数组内容中设置 div id

Question

我试图弄清楚如何为 16 个不同的 div 提供存储在 16 个元素长数组中的 id 名称。

这样我就可以随机化记忆游戏的 div“位置”，因为如果可能的话，会有 8 种不同的 div 样式随着 div id 的变化而变化。

我的计划是 div id 的名称与该特定 div 的样式名称相同。

有什么办法可以将第一个div的id和style设置为myarray[0]中的值，第二个div的id和style设置为myarray[1]，以此类推？

编辑：

var card = ["orange","orange","pink","pink","red","red","purple","purple",
"blue","blue","green","green","brown","brown","yellow","yellow"];

for(var j, x, i = card.length; i; j = parseInt(Math.random() * i),
x = card[--i], card[i] = card[j], card[j] = x);

然后在正文中我试图实现代表这一点的东西：

<div id="card[0]"></div>
<div id="card[1]"></div>
<div id="card[2]"></div>

等等……

Answer 1

这是一个使用纯 JavaScript 随机化类名的解决方案。

更新答案

既然问题已得到澄清，我已经更新了我的解决方案，它适合您的颜色。我已将.cards 的background-color 设置为数组中设置的颜色。这也可以使用id 轻松完成，我建议不要在id 中使用[] 字符，尽管我认为我不确定这是否符合标准。

jsFiddle

var colors = [
    "orange","orange","pink","pink","red","red","purple","purple",
    "blue","blue","green","green","brown","brown","yellow","yellow"
];

var divs = document.getElementsByClassName("card");

while (divs.length > 0) {
    var i = Math.floor(Math.random() * colors.length);
    divs[0].style.backgroundColor = colors[i];
    colors.splice(i, 1);
    divs = [].slice.call(divs, 1);
}

原答案

给定一个 id 数组和一组 HTML 元素，一个随机的 id 将分配给来自 ids 的每个元素。

jsFiddle

JavaScript

var ids = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"];
var divs = document.getElementsByClassName("game-element");

while (divs.length > 0) {
    var i = Math.floor(Math.random() * ids.length);
    divs[0].id = 'item-' + ids[i];
    ids.splice(i, 1);
    divs = [].slice.call(divs, 1);
}

HTML

<div class="game-element"></div>
<div class="game-element"></div>
<div class="game-element"></div>
<div class="game-element"></div>
<div class="game-element"></div>
<div class="game-element"></div>
<div class="game-element"></div>
<div class="game-element"></div>
<div class="game-element"></div>
<div class="game-element"></div>

CSS

.game-element {
    width:10px;
    height:10px;
    float:left;
}

#item-1  { background-color:#F00; }
#item-2  { background-color:#0F0; }
#item-3  { background-color:#00F; }
#item-4  { background-color:#FF0; }
#item-5  { background-color:#F0F; }
#item-6  { background-color:#0FF; }
#item-7  { background-color:#A0A; }
#item-8  { background-color:#0AA; }
#item-9  { background-color:#AA0; }
#item-10 { background-color:#000; }

Answer 2

为每个 div 分配一个 randomdiv 类或类似的东西。这将确保您可以在不影响其他 div 的情况下选择您想要的。

那么你就可以这样做了

var idArr = [/**random ids here**/];
$( ".randomdiv" ).each(function( index ) {
  $(this).attr("id",idArr[index]);
});

这将循环使用类 randomdiv 的每个 div，并为它分配一个来自 idArr 的值，您可以根据需要定义它，我想为您的用例提供某种类型的随机化函数

更新

随着您对问题的更新，我发现了一个问题。您有要设置的非唯一 ID。 id 必须是唯一的。如果你想将它们中的多个分配为相同的，你想使用类。所以代码看起来像这样

var card = ["orange","orange","pink","pink","red","red","purple","purple",

"蓝色","蓝色","绿色","绿色","棕色","棕色","黄色","黄色"]; $( ".randomdiv" ).each(function( index ) { $(this).addClass(card[index]); });

然后你可以像这样用 css 定义你想要的样式

.randomdiv.blue{
  background-color:blue;
}

.randomdiv.green{
  background-color:green;
}
...

Answer 3

很难确切知道你在追求什么，但如果使用 jQuery，你可以这样做：

HTML：

<div class="random"></div>
<div class="random"></div>
<div class="random"></div>

JavaScript：

var myarray = ["one","two","three"];    

// loop through all divs
$('div.random').each(function(index) {

    // set div id to array value
    $('div').attr('id', myarray[index]);

});

结果：

<div class="random" id="one"></div>
<div class="random" id="two"></div>
<div class="random" id="three"></div>

补充说明：

值得确保或至少检查数组长度是否等于 div 元素的数量，否则您可能会收到异常。

Answer 4

您的页面可以在服务器端或客户端呈现

1) 在服务器端，使用服务器端语言（例如 C#）和框架（例如 ASP.NET）会更容易

2) 在客户端，您可以基于任何 JavaScript 模板（例如下划线模板）生成 DOM，并通过将数组作为数据模型传递来呈现它） 可以参考下划线模板方法：http://underscorejs.org/#template

编辑

以服务器端为例（我使用 C# 和 MVC razor 视图作为示例，但如果您使用任何其他语言和 Web 服务器可能是相同的想法）。

@{ ids = ... }
@foreach (var id in ids) 
{
  <div id="@id"></div>
}

代码将帮助您生成具有您定义的 id 的 div。

在客户端（我使用下划线模板，但如果您使用任何其他引擎，同样的想法）

var list = "_.each(ids, function(id) {<div id='<%id%>'></div>});";
_.template(list, {ids: ['id1', 'id2', 'id3']});

这将生成 3 个具有列出的 id 的 div。

更新

最好在生成div的时候生成id，而不是先生成div再修改id。