单击时显示单击 JSON jQuery 的键的值答案

【问题标题】：On click show the values of key that clicked JSON jQuery单击时显示单击 JSON jQuery 的键的值
【发布时间】：2021-05-19 03:42:48
【问题描述】：

我有一个 JSON 文件，它的结构如下：

{
"class1": [
    {
      "age": "17",
      "name": "Mario"
    },
    {
      "age": "16",
      "name": "Messi"
    },
    {
      "age": "17",
      "name": "Xavi"
    },
    {
      "age": "18",
      "name": "Kaka"
    }
  ],
  "class2": [
    {
      "age": "16",
      "name": "Aldon"
    },
    {
      "age": "22",
      "name": "Roney"
    }
  ]
}

html：

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css" rel="stylesheet">
        <script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
        <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        <script src="script.js"></script>
        <style>
            body{
                margin: 0;
            }
            .my-card {
              height: 350px;
              width: 350px;
            }
            .mdc-top-app-bar{
                position: relative;
            }
        </style>
      
        <title>Links</title>
    </head>
    <body>
        <header class="mdc-top-app-bar">
            <div class="mdc-top-app-bar__row">
              <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
                <button id="btn" class="material-icons mdc-top-app-bar__navigation-icon mdc-icon-button" aria-label="Open navigation menu">menu</button>
                <span class="mdc-top-app-bar__title">Links</span>
              </section>
            </div>
          </header>
            <div>
                <section id="drawer">
                    <aside class="mdc-drawer mdc-drawer--modal">
                        <div class="mdc-drawer__content">
                            <h3>class</h3>
                        <nav class="mdc-list">
                          
                        </nav>
                        </div>
                    </aside>
                    <div id="scrollbar" class="mdc-drawer-scrim"></div>
                </section>
            </div>
            <div class="mdc-card">
              
            </div>
    </body>
      <script>
          console.log(mdc)
          const topAppBarElement = document.querySelector('.mdc-top-app-bar');
          const topAppBar = mdc.topAppBar.MDCTopAppBar.attachTo(topAppBarElement);

          const drawer = mdc.drawer.MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));
          
          topAppBar.setScrollTarget(document.getElementById('scrollbar'));
          topAppBar.listen('MDCTopAppBar:nav', () => {
            drawer.open = !drawer.open;
          });
          
      </script>
</body>
</html>

脚本：

$(document).ready(function () {
  $(function () {
    $.getJSON("links.json", function (data) {
      $.each(data, function (key) {
        $(".mdc-list").append(
          "<a class='mdc-list-item' href='#'><span class='mdc-list-item__ripple'></span><span class='mdc-list-item__text'>" +
            key +
            "</span></a>"
        );
      });
      $.each(data, function (key, value) {
        $(".mdc-card").append(
          "<a class='mdc-list-item' href='#'><span class='mdc-list-item__ripple'></span><span class='mdc-list-item__text'>" +
            JSON.stringify(data[key]) +
            "</span></a>"
        );
      });
    });
  });
});

我要做的是在 html 页面中呈现键

class1 class2 当我单击 class1 时，它应该显示 class1 class2 key => class2 values 中的所有值有什么帮助吗？这是我第 5 次发布此问题但没有得到任何帮助

这是我的沙盒：

https://codesandbox.io/s/affectionate-ride-7gm71?file=/script.js

【问题讨论】：

标签： jquery json

【解决方案1】：

使用选择器$(".mdc-list > a.mdc-list-item ") 并将点击绑定到锚标记

为了获得值，即 class 1 或 class 2 ，我们可以做类似$(this).children()[1].innerText

 $.each(data, function (key) {
        $(".mdc-list").append(
          `<a class='mdc-list-item'  href='#'><span class='mdc-list-item__ripple'></span><span class='mdc-list-item__text'>
            ${key}
            </span></a>`
        );
        $(".mdc-list > a.mdc-list-item ").click(function () {
          $(".mdc-card").html(
            "<a class='mdc-list-item' href='#'><span class='mdc-list-item__ripple'></span><span class='mdc-list-item__text'>" +
              JSON.stringify(data[$(this).children()[1].innerText]) +
              "</span></a>"
          );
        });
      });

CodeSandBox

【讨论】：