Question

我有一个动态创建的列表，使用常规Jquery插入到html中。列表的信息从外部JSON文件中提取并插入到正确的标记中。

如果元素是硬编码的，我的样式很好，当然，但我不明白为什么它不会从脚本文件中插入html样式。

样式仍会影响我尝试制作的每个菜单项的标题，但不会影响菜单项内的嵌套项。

这是我的JQuery：

$.getJSON( "externalJson.json", function( data ) {
    postData(data);
});

function postData(data){

    var html = "<ul>";

    $.each(data, function(key, value){
        //console.log(key + " " + value);

        if(typeof value == "object"){

        html += "<li><h3><span>" + key + "</span></h3><ul>";

            $.each(value.innerItem, function(i, j){
                console.log(i + " " + j.link);

                    html += "<li><a href=" + JSON.stringify(j.link) + ">" + j.item + "</a></li></ul>";

            });

            html += "</li>";
            html += "</ul>";


        } else {
            $('#content').append(key + " : " + value);
        }

    });

    $('#accordian').append(html);


};


$("#accordian h3").click(function(){

    $("#accordian ul ul").slideUp();

    if(!$(this).next().is(":visible")){
        $(this).next().slideDown();

    }
});

这是我的json：

{

"colors":"green",


"ItemTwo":
    {
      "innerItem":
            [{
                "item":"Keep Me! Don't Erase",
                "link":"http://www.google.com/"
            },
            {
                "item":"kitten",
                "link":"http://www.google.com/"
            },
            {
                "item":"kitten2",
                "link":"http://www.google.com/"
            },
            {
                "item":"kitten3",
                "link":"http://www.google.com/"
            }]
    },

"ItemThree":
    {
     "innerItem":
            [{
                "item":"meow",
                "link":"http://www.google.com/"
            },
             {
                "item":"meow",
                "link":"http://www.google.com/"
            },
            {
                "item":"meow",
                "link":"http://www.google.com/"
            }]
    }
  }

这是一个JSFiddle，我的样式和我想要实现的结果。不幸的是，json变量不能正常工作或显示添加的菜单项。

http://jsfiddle.net/Cherrybomb95/8c0w2g4q/1/

这也是我的代码当前使用外部json文件生成的链接。只需点击文件夹链接“WhatsOnTheMenu”，你就会看到它。

https://workspace-cherrysymphony.c9.io/

如果您对查看我的代码有任何疑问或问题，请与我们联系。谢谢。

Answer 1

您正在关闭内部<ul>循环中每个项目的$.each，并且href属性未被引号括起来。正确的代码如下：

function postData(data) {
    var html = "<ul>";
    $.each(data, function(key, value) {
        if(typeof value == "object") {
            html += "<li><h3><span>" + key + "</span></h3><ul>";
            $.each(value.innerItem, function(i, j){
                html += "<li><a href=\"" + JSON.stringify(j.link) + "\">" + j.item + "</a></li>";
            });
            html += "</ul></li>";
        } else {
            $('#content').append(key + " : " + value);
        }
    });
    html += "</ul>";
    $('#accordian').append(html);
};

$(document).ready(function() {
    $.getJSON( "externalJson.json", function( data ) {
        postData(data);
    });

    $("#accordian").on("click", "h3", function(){
        $("#accordian ul ul").slideUp();
        if(!$(this).next().is(":visible")) $(this).next().slideDown();
    });
});

Jquery创建的列表没有样式

1 个答案: