我有一组图像。我需要将三张图片连续包装成一组。
伪代码如下:
<div class="row" id="group1">
<img 1>
<img 2>
<img 3>
</div>
<div class="row" id="group2">
<img 4>
<img 5>
<img 6>
</div>
.....数组中剩余的图像继续。
我知道如何包装图像,并附加 <div class="row" id="group1"><div>
转换成 html。
我不知道的是如何将一组中的三个图像分配到行 div 中,其中包含一个 id,该 id 会根据数组中的图像数量动态增加。
例如,前三个图像被包裹在 id="group1"中。
预先感谢您的帮助!
更新
HTML 代码:
<div class="row">
<input type="file" id="files" name="files[]" multiple /> Upload More Images
</div>
<div class="row">
<span id="whatup" class="wrapMePlease"></span>
</div>
脚本
<script>
$(document).ready(function () {
if (window.File && window.FileList && window.FileReader) {
$("#files").on("change", function (e) {
var files = e.target.files,
filesLength = files.length;
var count = 0;
for (var n = 0; n < filesLength; n = n + 3)
// Insert a row for 3 image cols
$("<div class=\"row\" id=\"addColHere0\"></div>").insertAfter("#whatup");
for (var i = 0; i < filesLength; i++) {
var f = files[i]
var fileReader = new FileReader();
fileReader.onload = (function (e) {
var file = e.target;
// get the last DIV which ID starts with ^= "klon"
var $div = $('div[id^="addColHere"]:last');
// Read the Number from that DIV's ID (i.e: 3 from "klon3")
// And increment that number by 1
var num = parseInt($div.prop("id").match(/\d+/g), 10) + 1;
var changedId = "#addColHere" + (num - 1);
// Clone it and assign the new ID (i.e: from num 4 to ID "klon4")
var $klon = $div.clone().prop('id', 'klon' + num);
// >>> Append $klon wherever you want
// Insert cols inside row
$(changedId.value).append("<div id=\"breakThis\" class=\" col-sm-4 col-xs-6 toBeRemove\" style=\"padding:0 0px;\">" +
"<div class=\"col-sm-12 camera-style-small\" align=\"left\" >" +
"<img style=\" width:100%; height:100%; z-index:102;\" class=\"imageThumb\" src=\"" + e.target.result + "\" title=\"" + file.name + "\"/>" +
"<span class=\"remove icon-delete_icon create-deleteStyle\"></span>" +
"</div>" +
"</div>");
i = i + 1;
$(".remove").click(function () {
// $(this).parent(".camera-style-small").remove();
$(this).closest(".toBeRemove").remove();
});
});
fileReader.readAsDataURL(f);
}
});
} else {
alert("Sorry, but your browser doesn't support this function. Please update or try another browser.")
}
});
</script>
最佳答案
坚持你的伪代码示例(以帮助明确你正在寻找的东西):
let html = '';
let groupVal = 1;
for (let i = 0; i < files.length; i++) {
if (i % 3 === 0) {
html += `<div class="row" id="group${groupVal}"><div class="col-xs-12">`;
groupVal++;
}
html += `<img ${i + 1}">`;
if (i % 3 === 0) { html += `</div></div>`; }
}
...
$(TARGET).append(html);
这是 Fizz Buzz 的真实例子!
- 确定是否应创建新“组 div”的逻辑由模运算处理
- 数组的长度由files.length决定
- String interpolation用于将当前运行的变量放入不断增长的html字符串中
这似乎是朝着正确方向迈出的一步吗?
关于javascript - 如何在 Bootstrap 行类中每次包装三个图像?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41294983/