我不确定如何最好地解释这一点，但这是我的 js 文件的示例，下面是 html 文件的相应主体。理想情况下，我希望将 bar1、bar2 和 bar3 附加到三个元素中的每一个。从逻辑上讲，我认为在运行第一个 if 语句后，我的 js 文件会将 bar 元素附加到正确的 <div> 中。 html 文件中的元素，然后转到下一个 if 语句。我对为什么我按照我的方式编写函数的想法 - 我假设在每个 if 语句运行后附加到预期的元素，然后在下一个 if 语句中我可以更改已经创建的元素的一些东西，然后将它们附加到新元素。
当我运行它时会发生什么:
如果我检查页面上的元素，只有最后一个 <div>元素“pn-3bar-32”有 child 。然而，console.log()显示每个 if 语句都已运行。为什么是这样？仍在学习 JS，因此非常感谢您的帮助。
JS文件
window.onload = function () {
var bar1 = this.document.createElement("div");
var bar2 = this.document.createElement("div");
var bar3 = this.document.createElement("div");
if (this.document.getElementById("pn-3bar-16")) {
let menu = this.document.getElementById("pn-3bar-16");
var styles = 'background-color:black; width:16px; height:4px; margin-top:1px; margin-bottom:1px;'
bar1.setAttribute('style', styles);
bar2.setAttribute('style', styles);
bar3.setAttribute('style', styles);
menu.appendChild(bar1);
menu.appendChild(bar2);
menu.appendChild(bar3);
console.log("1st if");
}
if (this.document.getElementById("pn-3bar-24")) {
let menu = this.document.getElementById("pn-3bar-24");
var styles = 'background-color:black; width:24px; height:5px; margin-top:1px; margin-bottom:1px;'
bar1.setAttribute('style', styles);
bar2.setAttribute('style', styles);
bar3.setAttribute('style', styles);
menu.appendChild(bar1);
menu.appendChild(bar2);
menu.appendChild(bar3);
console.log("2nd if");
}
if (this.document.getElementById("pn-3bar-32")) {
let menu = this.document.getElementById("pn-3bar-32");
var styles = 'background-color:black; width:32px; height:6px; margin-top:2px; margin-bottom:2px;'
bar1.setAttribute('style', styles);
bar2.setAttribute('style', styles);
bar3.setAttribute('style', styles);
menu.appendChild(bar1);
menu.appendChild(bar2);
menu.appendChild(bar3);
console.log("3rd if");
}
}
HTML 正文
<body>
<div id="pn-3bar-16"></div>
<div id="pn-3bar-24"></div>
<div id="pn-3bar-32"></div>
</body>
最佳答案
您的代码的问题是您一遍又一遍地附加相同的元素。该元素只能存在于一个地方。因此，您需要在更改它们之前克隆它们。
if (this.document.getElementById("pn-3bar-16")) {
let menu = this.document.getElementById("pn-3bar-16");
var styles = 'background-color:black; width:16px; height:4px; margin-top:1px; margin-bottom:1px;'
const bar1Clone = bar1.cloneNode();
const bar2Clone = bar2.cloneNode();
const bar3Clone = bar3.cloneNode();
bar1Clone.setAttribute('style', styles);
bar2Clone.setAttribute('style', styles);
bar3Clone.setAttribute('style', styles);
menu.appendChild(bar1Clone);
menu.appendChild(bar2Clone);
menu.appendChild(bar3Clone);
console.log("1st if");
}
我会做什么:
window.addEventListener('load', function () {
var bars = [
document.createElement("div"),
document.createElement("div"),
document.createElement("div")
]
var data = {
'pn-3bar-16': 'background-color:black; width:16px; height:4px; margin-top:1px; margin-bottom:1px;',
'pn-3bar-24': 'background-color:black; width:24px; height:5px; margin-top:1px; margin-bottom:1px;',
'pn-3bar-32': 'background-color:black; width:32px; height:6px; margin-top:2px; margin-bottom:2px;'
}
Object.entries(data).forEach( function (dt) {
var menu = document.getElementById(dt[0])
if (menu) {
bars.forEach(function(bar){
const bc = bar.cloneNode()
bc.setAttribute('style', dt[1])
menu.appendChild(bc)
})
}
})
})<div id="pn-3bar-16"></div>
<div id="pn-3bar-24"></div>
<div id="pn-3bar-32"></div>关于javascript - JS console.log() 显示我的函数遍历了所有 if 语句，但被操作的元素没有改变，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59413340/