使用Javascript项目添加项目

-1

我试图将这些元素添加到我的网页中的所有Javascript代码中，并制作一个像metro-webdesign.info这样的页面，这有可能吗？我大部分都是JavaScript新手。我认为循环是错误的。使用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>

来源

2015-10-19 mozhii

哦，你应该格式化你的代码... – iplus26

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> "); 
      } 

}

来源

2015-10-19 06:33:05

谢谢你的解决方案:) – mozhii

永远欢迎！ –

使用Javascript项目添加项目

回答

相关问题