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/

相关文章:

javascript - Tensorflow.js : How to manage memory for a large dataset created using tf. data.generator 内存泄漏?

javascript - 语法错误 : Unexpected identifier with imported module Node. js

javascript - 在javascript中单击一个页面上的按钮时在不同页面中制作 anchor 标记

jquery - slimScroll 不可拖动

html - CSS :hover that shows more than one image

javascript - 是否可以循环更改 HTML5 或 css 中的不透明度值?

javascript - 除了标题之外,搜索在其他任何地方都不起作用

javascript - 下拉菜单和下拉列表宽度不完全对齐

javascript - HTML5 Required 字段错误信息问题

html - "asset_version"在html中的作用是什么