我创建了一个画廊。
图库分为 4 行网格。您可以选择图像，然后使用 Javascript 我将图像放置在网格中。
这是我的代码:
let column1 = document.getElementsByClassName('column1')[0];
let column2 = document.getElementsByClassName('column2')[0];
let column3 = document.getElementsByClassName('column3')[0];
let column4 = document.getElementsByClassName('column4')[0];
let column = 1;
document.getElementById('picField').onchange = function (evt) {
let tgt = evt.target || window.event.srcElement,
files = tgt.files;
for (let x = 0; x < files.length; x++) {
// FileReader support
if (FileReader && files && files.length) {
let fr = new FileReader();
fr.readAsDataURL(files[x]);
fr.onload = function () {
let img = document.createElement("img");
img.src = fr.result;
let removeButton = document.createElement("img");
removeButton.src = "remove.png";
if (column == 1) {
column1.appendChild(img);
column++;
} else if (column == 2) {
column2.appendChild(img);
column++;
} else if (column == 3) {
column3.appendChild(img);
column++;
} else if (column == 4) {
column4.appendChild(img);
column = 1;
}
}
}
// Not supported
else {
// fallback -- perhaps submit the input to an iframe and temporarily store
// them on the server until the user's session ends.
}
}
}* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: Arial;
}
.row {
display: flex;
flex-wrap: wrap;
padding: 0 4px;
margin: 30px 60px;
background-color: lightgray;
border-style: ridge;
}
/* Create four equal columns that sits next to each other */
.column {
flex: 25%;
max-width: 25%;
padding: 0 4px;
}
.column img {
margin-top: 4px;
margin-bottom: 4px;
vertical-align: middle;
width: 100%;
z-index: 1;
}
/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 800px) {
.column {
max-width: 50%;
}
}
/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
.column {
max-width: 100%;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="load">
<input type="file" name="picField" id="picField" size="24" onchange="preview_2(this);" alt="" accept="image/*"
multiple />
</div>
<div class="row">
<div class="column column1">
</div>
<div class="column column2">
</div>
<div class="column column3">
</div>
<div class="column column4">
</div>
</div>
</body>
<script src="/app.js"></script>
</html>let removeButton = document.createElement("img");
removeButton.src = "remove.png";This removeButton is just a simple 24px red cross .我想将这个 removeButton 添加到每个图像的右上角。当用户单击 removeButton 时，图像必须从图库中删除。
我想 Javascript 实现并不难。当图像和 removeButton 共享同一个父级时。我可以选择父级并将其删除。
但我未能正确布局。我试图使图像相对而 removeButton 绝对。但是 removeButton 绝对显示在正文中，而不是图像。
首先，我将 removeButton 添加为图像的子项。然后我将元素包装在一个 div 中，但注意工作。 This is what i have in mind.
谁能帮我解决这个问题？
最佳答案
你应该使用 <button>相反，您可以为其分配图像并相应地设置样式。两者都是图像不是一个好主意，一般来说，拥有明显是 <button> 的东西也不是一个好主意。作为<img>无障碍。我认为走那条路你可能会成功。如果您不理解这个想法，我可以根据您的代码想到一个示例。
编辑了一个我在想什么的小例子
let removeButton = document.createElement("button");
removeButton.classList.add("button-delete");
removeButton.innerHTML = "X";
if (column == 1) {
column1.appendChild(img);
// You will have to append this button to each column manually to each column number
column1.appendChild(removeButton);
column++;
此外，您还必须添加 click按钮的功能，在你的情况下，必须删除 img 元素和按钮本身......但请记住......你这样做的方式有点硬编码，当你删除一张图片，你还应该说，好吧，列数应该减少，但如果你已经在这个画廊中有一张图片，并删除中间的那张，这看起来不太好。
这已经是这里的另一个问题了，但我想建议你不要那么强制，比如，尽量不要使用太多 if如果可以的话，首先，尝试将图像自动换行，我首先想到的是使用 flex将它们包裹起来，因为它们适合画廊 div，这样您应该只删除图像，包裹将自行修复，您不必计算列数和诸如此类的事情。
对不起，如果我不够清楚:)
关于javascript - 在另一个图像上添加图像作为按钮，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56638988/