javascript - 带有 jQ​​uery json 数据的动态菜单

Question

我已经尝试过这个，但它不起作用。我正在尝试从 jQuery json 数据制作动态菜单。我在下面插入了预览。

我正在开发完全自定义的 UI，因此我计划不使用 jQuery.UI。

var data = {
        menu: [{
            name: 'Women Cloth',
            link: '0',
            sub: null
        },{
            name: 'Men Cloth',
            link: '1',
            sub: [{
                name: 'Arsenal',
                link: '0-0',
                sub: null
            }, {
                name: 'Liverpool',
                link: '0-1',
                sub: null
            }, {
                name: 'Manchester United',
                link: '0-2',
                sub: null
            }]
        }]};

    var getMenuItem = function (itemData) {
        var item = $("<li>", {
            class: 'has-children',
            id: itemData.id
        }).append(
        $("<a>", {
            href: itemData.link,
            html: itemData.name,
            id: itemData.id + '-links',
        }));
        if (itemData.sub) {
            var subMenuItem = $("<li>", {
            class: 'has-icon'
            }).append(
            $("<a>", {
                href: itemData.link,
                class: 'submenu-title',
            }));
            var subList = $("<ul>", {
                class: 'secondary-dropdown',
            });
            $.each(itemData.sub, function () {
                subList.append(subMenuItem(this));
            });
            item.append(subList);
        }
        return item;
    };
    var $menu = $("#Menu");
    $.each(data.menu, function () {
        $menu.append(
            getMenuItem(this)
        );
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="Menu"></ul>

下面是我需要的输出。

<li class="has-children" id="ID">
    <a id="ID-links" href="links">Women Clothing</a>
    <ul class="cd-secondary-dropdown is-hidden">
        <li class="go-back"><a>Back</a></li>
        <li class="has-icon"><a class="submenu">submenu 1</a></li>
        <li class="has-icon"><a class="submenu">submenu 2</a></li>
        <li class="has-icon"><a class="submenu">submenu 3</a></li>
        <li class="has-icon"><a class="submenu">submenu 4</a></li>
        <li class="has-icon"><a class="submenu">submenu 5</a></li>
    </ul>
</li>

<li class="has-children" id="ID">
    <a id="ID-links" href="links">Men Clothing</a>
    <ul class="cd-secondary-dropdown is-hidden">
        <li class="go-back"><a>Back</a></li>
        <li class="has-icon"><a class="submenu">submenu 1</a></li>
        <li class="has-icon"><a class="submenu">submenu 2</a></li>
        <li class="has-icon"><a class="submenu">submenu 3</a></li>
        <li class="has-icon"><a class="submenu">submenu 4</a></li>
        <li class="has-icon"><a class="submenu">submenu 5</a></li>
    </ul>
</li>

Answer 1

您没有按照预期使用 $.each 函数。您将 this 作为 args 传递给您的函数。 this 将在函数 getMenuItem

中未定义

在 $.each 函数中，您需要将 args 作为索引和数据。 Index 返回 JSON 中每个 key 的编号，而 data 是您需要传递给函数的数据.

此外，在您的cd-secondary-dropdown中，您只需添加ul一次，而不是在$.each.

我已经修复了您的代码，并且在上面的输出中完全按照您想要的方式工作。

运行下面的代码片段以查看其工作原理。

var data = {
  menu: [{
    name: 'Women Cloth',
    link: '0',
    sub: null
  }, {
    name: 'Men Cloth',
    link: '1',
    sub: [{
      name: 'Arsenal',
      link: '0-0',
      sub: null
    }, {
      name: 'Liverpool',
      link: '0-1',
      sub: null
    }, {
      name: 'Manchester United',
      link: '0-2',
      sub: null
    }]
  }]
};

var getMenuItem = function(itemData) {

  var item = $("<li>", {
    class: 'has-children',
    id: itemData.id
  }).append(
    $("<a>", {
      href: itemData.link,
      html: itemData.name,
      id: itemData.id + '-links',
    }));


  if (itemData.sub) {
    //Add UL once only
    var subList = $("<ul>", {
      class: 'secondary-dropdown',
    }); 
    //Append go back
    var goBack = $("<li>", {}).append(
      $("<a>", {
        href: '',
        html: 'Go back',
        class: 'go-back',
      }));
    //Append go back
    subList.append(goBack);
    $.each(itemData.sub, function(index, data) {
      //Sub menu
      var subMenuItem = $("<li>", {
        class: 'has-icon'
      }).append(
        $("<a>", {
          href: data.link,
          html: data.name,
          class: 'submenu-title',
        }));

      subList.append(subMenuItem);
    });

    item.append(subList);
  }
  return item;
};


var $menu = $("#Menu");
$.each(data.menu, function(index, data) {
  $menu.append(getMenuItem(data));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="Menu"></ul>