使用 $.get() 显示菜单和子菜单答案

【问题标题】：Show menu and submenu using $.get()使用 $.get() 显示菜单和子菜单
【发布时间】：2018-07-18 22:35:30
【问题描述】：

我有一个带有以 JSON 格式生成的子菜单的菜单。我想使用此代码在 HTML 页面上显示菜单和子菜单，但它不起作用。我做错了什么。请帮帮我。

let HandleClass = function() {
  $.get(SRCPATH + 'Frontend.php?method=HandleClass', function(res) {
    let obj = res;
    let data = obj.data;
    let x;
    let template = '';

    let class_menu = $('.class_menu');
    class_menu.html('');

    if (obj['status'] === 'ok') {
      for (x in data) {
        let class_ref = data[x].class_ref;
        let class_title = data[x].class_title;

        template += '<div class="col-md-3 sub-menu mt-5 mb-5 pl-4">';
        template += '<ol class="list-unstyled mx-4 dark-grey-text">';
        template += '<li class="sub-title text-uppercase mt-sm"><a class="menu-item" href="/class/' + class_title.toLowerCase() + '">' + class_title + '</a></li>';

        template += '</ol>';
        $.get(SRCPATH + 'Frontend.php?method=HandleSubClass&param=' + class_ref, function(res_sub) {
          let data_sub = res_sub.data;
          let x_sub;
          for (x_sub in data_sub) {
            let class_sub_ref = data_sub[x_sub].class_sub_ref;
            let class_sub_title = data_sub[x_sub].class_sub_title;

            console.log(class_sub_title);
            template += '<a href="" class""> ' + class_sub_title + '</a>';
          }
        });
        template += '</div>';
      }
      class_menu.append(template);
    } else {
      console.log('no record found...');
    }
  });
};

Nb :: 菜单显示有效，但子菜单无效

【问题讨论】：

标签： javascript jquery html json ajax

【解决方案1】：

您没有在第二个$.get 中附加模板，这是一个异步事件，可以在整个外部$.get 触发后触发。所以要解决这个问题，您确实需要将第二个模板再次附加到父级中。

let HandleClass = function() {
  $.get(SRCPATH + 'Frontend.php?method=HandleClass', function(res) {
    let obj = res;
    let data = obj.data;
    let x;
    let template = '';

    let class_menu = $('.class_menu');
    class_menu.html('');

    if (obj['status'] === 'ok') {
      for (x in data) {
        let class_ref = data[x].class_ref;
        let class_title = data[x].class_title;

        template += '<div id="uniqueID" class="col-md-3 sub-menu mt-5 mb-5 pl-4">';
        template += '<ol class="list-unstyled mx-4 dark-grey-text">';
        template += '<li class="sub-title text-uppercase mt-sm"><a class="menu-item" href="/class/' + class_title.toLowerCase() + '">' + class_title + '</a></li>';

        template += '</ol>';
        $.get(SRCPATH + 'Frontend.php?method=HandleSubClass&param=' + class_ref, function(res_sub) {
          let data_sub = res_sub.data;
          let x_sub;
          for (x_sub in data_sub) {
            let class_sub_ref = data_sub[x_sub].class_sub_ref;
            let class_sub_title = data_sub[x_sub].class_sub_title;

            console.log(class_sub_title);
            let tem = '<a href="" class""> ' + class_sub_title + '</a>';
            $("#uniqueID").append(tem);
          }
        });
        template += '</div>';
      }
      class_menu.append(template);
    } else {
      console.log('no record found...');
    }
  });
};

【讨论】：