Question

我尝试使用JSON动态创建一个使用标题，图像和描述填充的div元素。当它只是每个整个元素的三个元素时，我得到它的工作，但后来我想为三个次要元素中的每一个添加一些属性。

谁能看到我做错了什么？实际上，它只填充迭代的第一项，之后不再填充。此外，p标记的class属性没有填充，甚至不是未定义的。

我是JSON的新手，请在这里帮助我=）我确定我输入错误或者没有想好的事情，但我很难过。

项目：

    var json = {
        "items": [

     /* Item One */
     {
         "title": 
          {
             "text": "Title",
             "class": "titleClass"
          }
         ,

         "image": 
          {
             "src": "imgs/mail.png",
             "class": "imageClass"
          }
         ,

         "description": 
             {
             "text": "Author",
             "class": "authorClass"
             }
         ,
     },


     /* Item Two */
     {
         "title": 
             {
            "text": "Title2",
            "class": "titleClass"
             }
         ,

         "image": 
             {
             "src": "img/money.png",
             "class": "imageClass"
             }
         ,

         "description": 
             {
            "text": "Author2",
            "class": "authorClass"
             }
         ,}]};

迭代项目的代码：

    var news = document.getElementsByClassName("item-container")[0];
    var items = json.items;
    for (var i = 0; i < items.length; i++) {

        /* Title */
        var h2 = document.createElement("h2");
        h2.innerHTML = items[i].title.text;
        news.appendChild(h2);

            /* Class */
            var titleClass = document.createAttribute('class');
            titleClass.value = items[i].title.class;
            h2.setAttributeNode(titleClass);                

        /* Image */
        var img = document.createElement("img");
        var src = document.createAttribute('src');
        src.value = items[i].image.src;
        img.setAttributeNode(src);
        news.appendChild(img);

            /* Class */    
            var imageClass = document.createAttribute('class');
            imageClass.value = items[i].image.class;
            img.setAttributeNode(imageClass);

        /* Description */
        var p = document.createElement("p");
        p.innerHTML = items[i].description.text;
        news.appendChild(p);

            /* Class */
            var descClass = document.createAttribute('class');
            descClass.value = items[i].description.class;
            p.setAttributeNote(descClass);

    };

HTML：

            <div class="item-container">
            </div>

CSS：

还没有CSS，我试图在应用样式之前使其工作。

Answer 1

您只需要替换：

p.setAttributeNote(descClass);

使用：

p.setAttributeNode(descClass); //"...Node" instead of "...Note"

当一个循环只迭代一次时，问问自己是否所有的JS代码都是有效的，并开始寻找代码停止正常工作的错误。

希望它有所帮助！

动态填充的JSON Heirarchy

1 个答案: