JS console.log（）表明我的函数在所有if语句中都起作用，但是所操纵的元素没有改变

问题描述 投票：0回答：1

我不确定如何最好地解释这一点，但这是我的js文件的示例，下面是html文件的相应正文。理想情况下，我希望将bar1，bar2和bar3附加到三个元素中的每个元素上。从逻辑上讲，我认为运行第一个if语句后，我的js文件会将bar元素附加到html文件中正确的<div>元素，然后移至下一个if语句。我为什么要以这种方式编写函数的想法-我假设在每个if语句运行并追加到预期元素之后，然后在下一个if语句中，我可以对已创建的元素进行一些更改，然后将其追加到新元素。

我运行它会发生什么：如果我检查页面上的元素，则只有最后一个<div>元素“ pn-3bar-32”具有子级。但是，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>
javascript html dom
1个回答
1
投票

代码的问题是，您一次又一次地添加相同的元素。该元素只能生活在一个地方。因此，您需要先克隆它们，然后再更改它们。

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])
      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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.