Question

我尝试在Javascript代码中添加这些元素，并创建一个类似metro-webdesign.info的页面，这可能吗？我是Javascript的新手。我认为循环是错误的。

你能帮帮我吗？

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="../Site/StyleSheet.css" rel="stylesheet" />
    <script src="../Scripts/jquery-1.10.2.min.js"></script>
    <script src="../Scripts/jquery-1.10.2.js"></script>
    <script>
        var x = 250;
        var y = 140;
        var i = 0;
        $("document").ready(function () {
            var aMenu = [{
                title: "Home", image: '../Icons/1.png',
                items: [{ title: "about", w: "x", h: "y", image: '../Images/1-1.PNG' },
                        { title: "feature", w: "x", h: "y", image: '../Images/1-2.PNG' },
                        { title: "themes", w: "x", h: "y", image: '../Images/1-3.PNG' },
                        { title: "typography", w: "x", h: "y", image: '../Images/1-4.PNG' },
                        { title: "look", w: "2x", h: "y", image: '../Images/1-5.PNG' }],
                title: "Download", image: '../Icons/2.png',
                items: [{ title: "template", w: "4x", h: "1x", image: "/image/2-1.jpg" },
                        { title: "bugs", w: "1x", h: "1x", image: "/image/2-2.jpg" },
                        { title: "thanks", w: "1x", h: "1x", image: "/image/2-3.jpg" },
                        { title: "metro", w: "1x", h: "1x", image: "/image/2-4.jpg" }] ,      
                title: "Support", image: '../Icons/3.png',
                items: [{ title: "template", w: "4x", h: "1x", image: "/image/3-1.jpg" },
                  { title: "bugs", w: "1x", h: "1x", image: "/image/3-2.jpg" },
                  { title: "thanks", w: "1x", h: "1x", image: "/image/3-3.jpg" },
                  { title: "metro", w: "1x", h: "1x", image: "/image/4-4.jpg" }]  }]
            var dv = ("#dvTitleMenu");
            for (i = 0; i < aMenu.length; i++) {
                $("#dvTitleMenu").append("<div class='col6'><a href='#'> <h2> " + aMenu[i].title + "</h2><img src=" + aMenu[i].image + " "+ aMenu[i].items+" /> </a></div> ");

            }
        });
    </script>
</head>
<body id="body">
    <div id="dvMain">
        <div id="dvHeader">
            <div id="dvTitle" class="col6">
            </div>
            <div id="dvTitleMenu" class="col6">
            </div>
        </div>

        <div id="dvcontent">
            <div id="dvHome" class="col3">
            </div>
            <div id="dvArrow1" class="col1">
            </div>
            <div id="dvDownload" class="col3">
            </div>
            <div id="dvArrow2" class="col1">
            </div>
            <div id="dvSupport" class="col3">
            </div>
        </div>
    </div>
</body>
</html>

Answer 1

aMenu [i] .items是一个数组。没有索引，您无法直接访问数组。请使用下面的代码段。我没有尝试，但会工作。

for (i = 0; i < aMenu.length; i++) 
{
   //Your logic for outer loop
   $("#dvTitleMenu").append("<div class='col6'><a href='#'> <h2> " + aMenu[i].title + "</h2><img src=" + aMenu[i].image + " /> </a></div> ");

     for(var j=0; j< aMenu[i].items.length; j++)
             {         
                //Your logic for inner loop     
                $("#dvTitleMenu").append("<div class='col6'><a href='#'> <h2> " + aMenu[i].items[j].title + "</h2><img src="+ aMenu[i].items[j].image +" /> </a></div> ");
             }

}

使用Javascript项添加项目

1 个答案: