不能用数据填充智能菜单jquery网格

cant fill smart menu jquery grid with data

本文关键字：菜单 jquery 网格 智能 填充 数据 不能      更新时间：2023-09-26

我正在使用这个网格

，我想用我的数据填充它。下面是我的代码:

 {"menu" :[{ 
"name": "Computers",
 "children": [{
  "name": "Notebook",
  "children": [{
   "name": "Apple"
  }, {
   "name": "Windows"
  }]
 }, {
  "name": "Tablets",
  "children": [{
   "name": "Apple"
  }, {
   "name": "Android"
  }, {
   "name": "Windows"
  }]
 }]
}, {
 "name": "Phones",
 "children": [{
  "name": "Android",
  "children": [{
   "name": "Samsung"
  }, {
   "name": "Nokia"
  }, {
   "name": "Lenovo"
  }]
 }, {
  "name": "Windows Phones",
  "children": [{
   "name": "Microsoft"
  }, {
   "name": "Nokia"
  }]
 }]
}, {
 "name": "Cameras",
 "children": [{
  "name": "Digital",
  "children": [{
   "name": "Nikon"
  }, {
   "name": "Fuji"
  }]
 }, {
  "name": "DSLR",
  "children": [{
   "name": "Canon"
  }, {
   "name": "Nikon"
  }]
 }]
}]
}

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
  $(function () {
    $('#main-menu').smartmenus({
    	subMenusSubOffsetX:1,
    	subMenusSubOffsetY: -8
    	
    });
  });   
</script>
 <script type = "text/javascript" language = "javascript">
 
         $(document).ready(function() {
             $.ajax({
              url: 'menuData.json',
              type: 'get',
              dataType: 'json',
              error: function(data){
               alert("error");
              },
              success: function(data){
               var obj=data;
               var json = JSON.stringify(obj);
               var s = JSON.parse(json);
               for(var i=0;i<s.menu.length;i++){
	             for(var j=0;j<s.menu[i].children.length;j++)
	             for(var n=0;n<s.menu[i].children[j].children.length;n++){
	            	
	            	
	               $("#main-menu2").append('<li><span>' + s.menu[i].name+s.menu[i].children[j].name + s.menu[i].children[j].children[n].name + '</span></li>');
	            	
               }
               }
                  }
              });
         });
      </script>
</head>
<body>
<!-- Mobile menu toggle button (hamburger/x icon) -->
<input id="main-menu-state" type="checkbox" />
<label class="main-menu-btn" for="main-menu-state">
  <span class="main-menu-btn-icon"></span> Toggle main menu visibility
</label>
<!-- Sample menu definition -->
<nav id="main-nav" role="navigation">
     <ul id="main-menu2" class="sm sm-clean"></ul>
 
</nav>
</body>
</html>

在屏幕上打印数据而不填充菜单。

错误:

Uncaught ReferenceError: $ is not defined in contentscript.js:21

我是初学者，谢谢你的帮助。

试试这样:

var data = {
  "menu": [{
    "name": "Computers",
    "children": [{
      "name": "Notebook",
      "children": [{
        "name": "Apple"
      }, {
        "name": "Windows"
      }]
    }, {
      "name": "Tablets",
      "children": [{
        "name": "Apple"
      }, {
        "name": "Android"
      }, {
        "name": "Windows"
      }]
    }]
  }, {
    "name": "Phones",
    "children": [{
      "name": "Android",
      "children": [{
        "name": "Samsung"
      }, {
        "name": "Nokia"
      }, {
        "name": "Lenovo"
      }]
    }, {
      "name": "Windows Phones",
      "children": [{
        "name": "Microsoft"
      }, {
        "name": "Nokia"
      }]
    }]
  }, {
    "name": "Cameras",
    "children": [{
      "name": "Digital",
      "children": [{
        "name": "Nikon"
      }, {
        "name": "Fuji"
      }]
    }, {
      "name": "DSLR",
      "children": [{
        "name": "Canon"
      }, {
        "name": "Nikon"
      }]
    }]
  }]
};
var obj = data;
var menu ='';
$.each(data.menu,function(i,v){
menu += '<li>'+v.name+'<ul>';
  $.each(v.children,function(x,t){
    menu += '<li>'+t.name+'<ul>';
    $.each(t.children,function(j,r){
     menu+='<li>'+r.name+'</li>';
    });
    menu += '</ul></li>';
  });
menu += '</ul></li>';
});
  $("#main-menu2").append(menu);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<!-- Mobile menu toggle button (hamburger/x icon) -->
<input id="main-menu-state" type="checkbox" />
<label class="main-menu-btn " for="main-menu-state">
  <span class="main-menu-btn-icon "></span> Toggle main menu visibility
</label>
<!-- Sample menu definition -->
<nav id="main-nav" role="
navigation ">
  <ul id="main-menu2" class="sm sm-clean "></ul>
</nav>

错误信息几乎说明了一切。$没有定义。我认为您没有将jQuery链接到页面，但是您提到您已经这样做了。因此，仍然存在两种可能性:

  • 你可能正在加载jquery后，你尝试使用$和点，在你尝试使用$它还没有定义
  • 您的jquery对象可能与$有不同的名称，如jQuery，例如
相关文章：