HTML + JS -尝试用div包围使用for循环创建的某些内容
HTML + JS -尝试用div包围使用for循环创建的某些内容
提问于 2018-08-01 03:31:23
我正在编写一个冒险游戏，并有一个原始的sortInventory()函数。它在player.inventory数组中循环，并在它自己的<div>中显示每一项。我想用一个<div class="inv">包围整个已完成的'inventory‘--下面是函数：
function sortInventory() {
var rowCount = 0;
var firstRowDone = false;
for(var i = 0; i < player.inventory.length; i++) {
rowCount++;
if(rowCount == 6 && firstRowDone == false) {
firstRowDone = true;
rowCount = 0;
dock.innerHTML += "<br>"
}
if(rowCount == 5 && firstRowDone) {
dock.innerHTML += "<br>"
rowCount = 0;
}
dock.innerHTML += "<div class='inv-item'><img class='inv-img' src='" + player.inventory[i].img + "'></img></div>";
}
}
function showInventory() {
dock.innerHTML = "<div class='inv'>";
sortInventory();
dock.innerHTML += "</div>"
}这当前输出：
<div class="inv"></div>
<div class="inv-item">..</div>
<div class="inv-item">..</div>
<!-- and so on -->但是我想让它输出：
<div class="inv">
<div class="inv-item">..</div>
<div class="inv-item">..</div>
<!-- and so on -->
</div>我如何才能让它实现这一点?为什么它要提前结束标记？提前谢谢。
回答 5
Stack Overflow用户
回答已采纳
发布于 2018-08-01 03:37:58
将其存储在一个变量中，然后一次全部编写，而不是尝试将其分块编写。
function sortInventory() {
var rowCount = 0;
var invList = '';
for(var i = 0; i < player.inventory.length; i++) {
rowCount++;
if(rowCount == 6 && firstRowDone == false) {
firstRowDone = true;
rowCount = 0;
dock.innerHTML += "<br>"
}
if(rowCount == 5 && firstRowDone) {
dock.innerHTML += "<br>"
rowCount = 0;
}
invList += "<div class='inv-item'><img class='inv-img' src='" + player.inventory[i].img + "'></img></div>";
}
return invList;
}
function showInventory() {
dock.innerHTML = "<div class='inv'>" + sortInventory() + "</div>";
}之所以会发生这种情况，是因为打开标记在没有结束标记的情况下不能存在于DOM中，只有少数例外，比如仍然作为<br >有效的<br />，所以大多数浏览器都会尝试对此进行补偿，并为您编写结束标记。
简而言之，增量地写入innerHTML标签总是一个坏主意，并且会导致意想不到的结果，因为大多数浏览器都会尝试纠正它。
Stack Overflow用户
发布于 2018-08-01 03:48:59
使用innerHTML可能很麻烦，更不用说(有时)危险了。相反，我将使用document.createElement和Node.appendChild方法。
function sortInventory() {
var rowCount = 0;
var inv = document.createElement('div');
inv.classList.add('inv');
for(var i = 0; i < player.inventory.length; i++) {
rowCount++;
if(rowCount == 6 && firstRowDone == false) {
firstRowDone = true;
rowCount = 0;
inv.appendChild(document.createElement('br'));
}
if(rowCount == 5 && firstRowDone) {
inv.appendChild(document.createElement('br'));
rowCount = 0;
}
var invItem = document.createElement('div');
invItem.classList.add('inv-item');
var invImg = document.createElement('img');
invImg.classList.add('inv-img');
invImg.setAttribute('src', player.inventory[i].img);
invItem.appendChild(invImg);
inv.appendChild(invItem);
}
dock.appendChild(inv);
}
function showInventory() {
sortInventory();
}Stack Overflow用户
发布于 2018-08-01 03:42:18
为了在具有.inv-item类的元素周围创建具有类.inv的包装器元素，在sortInventory函数中的字符串中构造HTML，然后在设置dock元素的innerHTML时作为要使用的content返回
var boxIcon = 'https://image.flaticon.com/icons/svg/122/122186.svg';
var player = {
inventory: [
{img: boxIcon},
{img: boxIcon},
{img: boxIcon}
]
};
var dock = document.getElementById('dock');
function sortInventory(inv) {
var rowCount = 0;
var content = ''
for (var i = 0; i < player.inventory.length; i++) {
rowCount++;
if (rowCount == 6 && firstRowDone == false) {
firstRowDone = true;
rowCount = 0;
content += "<br>"
}
if (rowCount == 5 && firstRowDone) {
content += "<br>"
rowCount = 0;
}
content += "<div class='inv-item'><img class='inv-img' width='32px' src='" + player.inventory[i].img + "'></img></div>";
}
return content;
}
function showInventory() {
dock.innerHTML = "<div class='inv'>" + sortInventory() + "</div>";
}
showInventory();.inv {
background: #CCC;
}<div id="dock"></div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51620761
复制相关文章
相似问题
腾讯云开发者
