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

我试图通过点击几个链接来构建特定json文件的动态路径。这是餐厅菜单。当用户单击一个链接时，我希望json数据在div中返回一个解析为html的文件。我让该部分工作，但当我尝试更改json文件的路径时，我得到一个404错误，其中一个空白的.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" );
});
});
});

使用特定路径获取json文件效果很好：

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

那么我做错了什么？我想

这个.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数据，并在单击某个项目时加载新的json数据？我是不是走错了路？

改变

var gJsn = this.id;

到

---

我的猜测是，带有class

linki

的元素没有您所期望的想法。它是：

谢谢，我将编辑以显示我的导航菜单：li id是“soup”，但您的josn文件有“soups”@AtlanteAvila，现在试试。我做了更正。Hi JAG谢谢你的回复，但这也不是问题所在。我得到的错误是404:

GEThttp://localhost:9000/json/.json 404（未找到）

我确实修复了您指出的问题。。。谢谢你好，谢谢你的帖子，我尝试了你的代码，我得到了另一个404:

gethttp://localhost:9000/json/undefined.json 404（未找到）

。有什么想法吗？谢谢@ammarces！你知道如何删除旧数据，并在项目被点击时加载新数据，从而只显示一组菜单项吗？谢谢@亚特兰提维拉，我不知道你的意思。如果这是一个不同的问题，你应该问一个新问题。很高兴我能帮忙！

var gJsn = this.id;

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