我是编程和网站开发的新手.我正在做的项目仅用于实践,如果我的方法对您来说很满意,请提出任何更好的选择.
我正在尝试开发停车场预订系统.并且在用户界面中,我想显示所有空白/已满的广告位(就像在预订电影或公交车票时一样).
我找不到汽车的顶视图图标,因此我想到了使用图像代替图标.
但是从图像开始,如果我在单个页面上使用50张图像,该页面将变得非常沉重.
但是重要的一点是,我需要将所有元素作为单独的实体,只有这样,我才能使用它们的id(唯一地址)进行预订.所以我想要50个具有不同ID的div,但只想对所有广告位使用一个图像,或者最多使用2个不同的图像(请牢记方向).
how to display same image multiple times using same image in javascript
我仔细研究了这个答案,发现了一段可能有用的代码：
var imgSrc = 'http://lorempixel.com/100/100';
function generateImage() {
var img = document.createElement('img')
img.src = imgSrc;
return img;
}
for (var i = 0; i < 20; i++ ) {
document.body.appendChild(generateImage());
}
虽然我可以利用JavaScript中的函数和循环来创建一个图像的多个副本,但我不知道如何将它们分配给具有不同ID的不同div标签.
最佳答案
使用一个功能:)
原文链接：https://www.f2er.com/html/530454.htmlconst addMessage = (element,msg,cls) => {
const patt = new RegExp("<");
const messageElement = document.createElement("div");
if (patt.test(msg)) {
messageElement.innerHTML = msg
} else messageElement.textContent = msg;
if (cls) messageElement.classList.add(cls);
element.appendChild(messageElement);
}
const imgPath = "/somepath";
const body = document.querySelector("body");
addMessage(body,`<img src=${imgPath} class="whatever">`,"img1"); //creates new divs with classes. the 3rd arg is optional
