Question

我正在尝试通过点击几个链接来构建特定json文件的动态路径。这是一个餐厅菜单。当用户单击链接时，我想让json数据返回一个解析为div内的html。我有那个部分工作，但当我尝试更改json文件的路径时，我得到404错误，blank.json文件不存在。这是我的代码：

$( document ).ready(function() {
$('.linki').click(function(){
  var gJsn = this.id;
  $.getJSON( 'json/'+gJsn+'.json', function( data ) {
  var items = [];
  $.each( data, function( key, val ) {
    items.push( "<li id='" + key + "'>" + val + "</li>" );
    console.log(key + ' ' + val + ' ' + gJsn);
  });

  $( "<ul/>", {
    "class": "my-new-list",
    html: items.join( "" )
  }).appendTo( ".menuHere" );
});
});
});

具体问题在于第四行：

$.getJSON( 'json/'+gJsn+'.json', function( data ) {

获取具有特定路径的json文件可以正常工作：

$.getJSON( 'json/soups.json', function( data ) {

那么我做错了什么？我认为this.id可以正常工作。在此先感谢您的帮助！

这是我的导航菜单代码：

<nav>
  <ul  class="nav">
    <li id="soup" class="menu-item menu-item-21"><a href="#soup" class="linki">Soup</a></li>
    <li id="appetizers" class="menu-item menu-item-26"><a href="#appetizers" class="linki">Appetizers</a></li>
    <li id="menu-item-25" class="menu-item menu-item-25"><a href="#events" class="linki">Family Style Dinners</a></li>
    <li id="menu-item-29" class="menu-item menu-item-29"><a href="#suppliers" class="linki">Mu-Shu</a></li>
    <li id="menu-item-231" class="menu-item menu-item-231"><a href="#andy-hilton" class="linki" class="linki">Fried Rice</a></li>
    <li id="menu-item-231" class="menu-item menu-item-231"><a href="#andy-hilton" class="linki" class="linki">Chow Mein</a></li>
    <li id="menu-item-231" class="menu-item menu-item-231"><a href="#andy-hilton" class="linki" class="linki">Pan Fried Noodle</a></li>
    <li id="menu-item-231" class="menu-item menu-item-231"><a href="#andy-hilton" class="linki" class="linki">Chow Fun</a></li>
    <li id="menu-item-231" class="menu-item menu-item-231"><a href="#andy-hilton" class="linki" class="linki">Drinks</a></li>
    <li id="menu-item-231" class="menu-item menu-item-231"><a href="#andy-hilton" class="linki">Egg Fu Yung</a></li>
    <li id="menu-item-231" class="menu-item menu-item-231"><a href="#andy-hilton" class="linki">Sizzling Entree</a></li>
    <li id="menu-item-231" class="menu-item menu-item-231"><a href="#andy-hilton" class="linki">Vegetable Entree</a></li>
    <li id="menu-item-231" class="menu-item menu-item-231"><a href="#andy-hilton" class="linki">Pork Entree</a></li>
    <li id="menu-item-231" class="menu-item menu-item-231"><a href="#andy-hilton" class="linki">Prawn Entree</a></li>
    <li id="menu-item-231" class="menu-item menu-item-231"><a href="#andy-hilton" class="linki">Lunch Specials</a></li>
    <li id="menu-item-231" class="menu-item menu-item-231"><a href="#andy-hilton" class="linki">Chef's Specials</a></li>
    <li id="menu-item-231" class="menu-item menu-item-231"><a href="#andy-hilton" class="linki">Chicken Entree</a></li>
    <li id="menu-item-231" class="menu-item menu-item-231"><a href="#andy-hilton" class="linki">Beef Entree</a></li>
  </ul>
</nav>

另外，我想要识别的一个项目是如何删除以前的json数据并在单击某个项目时加载新数据？我是以错误的方式接近这个吗？

Answer 1

更改

var gJsn = this.id;

到

var gJsn = $(this).closest('.menu-item').attr('id');

使用jquery根据用户单击的链接的id动态创建文件路径

1 个答案: