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

标签 javascript jquery html json

我正在尝试通过单击多个链接来构建特定 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 数据并加载新数据?我是不是以错误的方式处理这个问题?

最佳答案

改变

var gJsn = this.id;

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

关于javascript - 使用jquery根据用户点击的链接id动态创建文件路径,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29773062/

相关文章:

jquery - 使用 jquery 将子级的属性和值复制到父级

javascript - jQuery 切换类需要在 Internet Explorer 中单击两次?

javascript - 动态加载表单和提交脚本

javascript - 如何在不阻止touchstart的情况下阻止 'Overscroll history navigation'?

javascript - promise 后的重定向处理

javascript - 预加载图像以使其在加载过程中不调整大小?

html - 用 div 标签替换 html 表格

javascript - 需要具有不同宽度的响应式等高 div 标签

javascript - 是否可以使用jquery从嵌入文件中访问DOM信息?

javascript - 测试用例没有通过,而 console.logs 是正确的