需要用Javascript重复可操作的东西大量次

我需要1024个小部件在屏幕上进行操作，并且我通过粘贴不同时间间隔的类型的大量副本将它们写出来......仅仅意识到我无法获得类名称以我需要的方式工作。所以现在我试图做一个脚本，写1024个重复的页面，每个都有自己的id，我完全不确定自己的for循环。最好的，我能想到的是：需要用Javascript重复可操作的东西大量次

for(i=0; i < 1024; i++) 
{document.write("<img src=\"token.png\" class=\"widget\" id=\"X"+i+"\">"}

什么建议吗？

来源

2016-11-27 wmjg

动态ID几乎总是意味着“你做错了”。为什么你需要动态的id值？ – zerkms

而......'document.write（）'也是未来问题的一个好兆头。使用'var img = document.createElement（“img”）; img.src = ...; img.class = ...''和'elemnent.appendChild（img）;' –

使用base 4制作一个小型的数学游戏，并且因为我需要独立操作它们中的大部分（如4,16,64或256一次）。有了类名，我用函数参数跑进了一面墙，如果这些项是id的，而不是getElementsByClassName数组中的类，我可以解析这些参数。 – wmjg

我会改变你的脚本是这样的：

var widgets = [] 
for(var i=0; i < 1024; i++){ 
    let item = document.createElement("span"); 
    item.classList.add("widget"); 
    widgets.push(item); 
    document.body.appendChild(item); 
}

，然后添加CSS这样看。

.widget::after{ 
    content: url("token.png") 
}

我的理由：

文件撰写容易产生XSS，难以阅读，并且很难写。
如果您以后需要能够轻松访问您的项目，则数组索引可能会比getElementById快。如果你的代码将被传递的项目，不知道他们的索引，然后索引存储在ID可能会更有帮助。
如果每个图像都具有相同的文件，那么最好将它放在css中，因为它可以节省加载时间。如果有一小部分图像（例如三个不同的图像），则为每个图像创建一个类。如果图像随每个项目而改变，则恢复为<img>和src。

来源

2016-11-27 05:49:58

有几种方法可以避免动态ID。您可以使用小部件类对所有小部件进行分组，并拥有另一个可以唯一标识小部件的类。像

<img class="widget widget-1" src="someUrl"/>

或别的东西，你也可以有

<img class="widget" src="someUrl"/>

，并使用第n个孩子CSS选择器访问它们，使用document.querySelector（）

而且，总是建议避免document.write方法。相反，您可以使用document.createElement /使用字符串文字表示并在循环完成后追加连接的字符串。

var container = document.CreateElement("div"); 

for (var idx = 0; idx < 1024; idx++) { 
    var imageElement = document.createElement("img"); 
    imageElement.classList.add("widget"); 
    // In the above case , you need to use document.querySelector("img:nth-child(someIdx)") 
    //or 
    imageElement.classList.add("widget", "widget" + idx); 
    // In the above case , you need to use document.querySelector("img.widget-"+someIdx)") 
    container.append(imageElement); 
} 

document.querySelector("body").append(container);

来源

2016-11-27 05:58:30 Sreekanth

需要用Javascript重复可操作的东西大量次

回答

相关问题