将元素附加到特定 ID、for 循环和匿名函数?

我为图形元素创建了一个名为figBox的元素节点,将其id属性设置为“styleThumbs”并尝试将其附加到 id 为“box”的 div 元素。


然后我需要填充图形框,插入一个索引从 0 到 4 的 for 循环。在该循环中,我想创建一个名为“sheetImg”的 img 元素节点,其 src 属性为“na_small_num.png”和"na_style_num.css"的alt属性值(其中 num 是 for 循环中索引的值)。


最后,当用户单击其中一个缩略图时,我需要让浏览器加载一个不同的样式表,方法是向“sheetImg”添加一个事件处理程序,该处理程序运行一个匿名函数,将 ID 为“fancySheet”的链接元素的href属性更改为事件目标的alt属性值。


这是我已经尝试过的:


var figure = document.createElement("figBox");

            figure.setAttribute("id", "styleThumbs");

            document.getElementById("box").appendChild(figure);


   for (var i = 0; i = 3; i++) {

   var img = document.createElement("sheetImg");

             img.setAttribute("src", "na_small_num.png");

             img.setAttribute("alt", "na_style_" + [i] + ".css");


sheetImg.onclick = styleElm.seAttribute("href", "alt");

sheetImg.appendChild(figure);

检查我的代码的程序将此返回为不正确,考虑到我完全没有经验,这并不奇怪。我哪里出错了?


编辑


各位,谢谢你们的帮助。我已经弄清楚了这里的大量问题。这是正确的代码:


var figBox = document.createElement("figure");

             figBox.setAttribute("id", "styleThumbs");

             document.getElementById("box").appendChild(figBox);


for (var i = 0; i < 5; i++) {

   var sheetImg = document.createElement("img");

                  sheetImg.setAttribute("src", "na_small_" + i + ".png");

                  sheetImg.setAttribute("alt", "na_style_" + i + ".css");

                  sheetImg.onclick = function(e) {

                     document.getElementById("fancySheet").href = e.target.alt;

                  }

                  figBox.appendChild(sheetImg);

}


var thumbStyles = document.createElement("style");

document.head.appendChild(thumbStyles);


猛跑小猪
浏览 123回答 2
2回答

慕田峪4524236

HTML<!DOCTYPE html><html>&nbsp; &nbsp; <head>&nbsp; &nbsp; &nbsp; &nbsp; <link rel="stylesheet" type="text/css" href="na_style_8.css">&nbsp; &nbsp; </head>&nbsp; &nbsp; <body>&nbsp; &nbsp; &nbsp; &nbsp; <div id="box"></div>&nbsp; &nbsp; </body></html>Javascript<script type="text/javascript">&nbsp; &nbsp; var figure = document.createElement('figBox'),&nbsp; &nbsp; &nbsp; &nbsp; loadStylesheet = (stylesheet) => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; stylesheetElement.setAttribute('href', stylesheet + '?' + new Date().getTime());&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; stylesheetElement = document.querySelector('link[href="na_style.css"]');&nbsp; &nbsp; figure.setAttribute('id', 'styleThumbs');&nbsp; &nbsp; document.getElementById('box').appendChild(figure);&nbsp; &nbsp; for (var i = 0; i < 4; i++) {&nbsp; &nbsp; &nbsp; &nbsp; var sheetImage = document.createElement('sheetImage');&nbsp; &nbsp; &nbsp; &nbsp; sheetImage.setAttribute('src', 'na_small_num.png');&nbsp; &nbsp; &nbsp; &nbsp; sheetImage.setAttribute('alt', 'na_style_' + [i] + '.css');&nbsp; &nbsp; &nbsp; &nbsp; // Populate figBox with created sheetImage&nbsp; &nbsp; &nbsp; &nbsp; figure.appendChild(sheetImage);&nbsp; &nbsp; &nbsp; &nbsp; // Add click event listener to sheetImg element&nbsp; &nbsp; &nbsp; &nbsp; sheetImage.addEventListener('click', (event) => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // Load stylesheet with anonymous function&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; loadStylesheet(event.target.getAttribute('alt'));&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; }</script>
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript