Json 数据在点击时呈现不同的内容

Question

我无法将按钮连接到我的 JSON 结构。我希望每个按钮都呈现每个域。我尝试选择 $('button') 并应用 onlclick() 函数，但它不起作用。 是不是因为我使用 JSON 来渲染 4 个按钮，而不是为每个按钮创建一个 HTML 结构？

//landing domain info/deisgn and structure
const domainInfo = [{
    id: 001,
    domain: "Title 1",
    photo: "title-1.jpg",
  },
  {
    id: 002,
    domain: "Title 2",
    photo: "title-2.jpg",
  },
  {
    id: 003,
    domain: "Title 3",
    photo: "title-3.jpg",
  },
  {
    id: 004,
    domain: "Title 4",
    photo: "title-4.jpg",
  },
]

function domainTemplate(domaininfo) {
  return `
    <div class="box__shadow">
        <button id="myBtn" class="myBtn" type="button">
        <img src="${domaininfo.photo}" width="90%;"style="margin: 0em; padding: 0em;">
        <div class="cover-bkg-ser-domain4">
        <h4 style="overflow:hidden; color: #1a4177; font-weight: bold; font-size: 18px; padding: 1em; margin: 0em;">${domaininfo.domain}</h4>
        </div>
        </button>
    </div>
    `
}

document.getElementById("domainCat").innerHTML = `
${domainInfo.map(domainTemplate).join('')}
`

//Serice category data
const serviceData = [{
    domain1Data: [{
        "manager": "Manager Name",
        "subcat": "Subcategory name",
        "logo": {
          "prefpart": "logo-1",
          "secpart": "logo-2",
          "locpart": null
        }
      },
      {
        "manager": "Manager Name",
        "subcat": "Subcategory Name",
        "logo": {
          "prefpart": "logo-1",
          "secpart": "logo-2",
          "locpart": "logo-3"
        }
      },
      {
        "manager": "Manager Name",
        "subcat": "Subcategory Name",
        "logo": {
          "prefpart": "logo-1",
          "secpart": "logo-2",
          "locpart": "logo-3"
        }
      },
      {
        "manager": "Manager Name",
        "subcat": "Subcategory Name",
        "logo": {
          "prefpart": "logo-1",
          "secpart": "logo-2",
          "locpart": "logo-3"
        }
      },
    ]
  },
  //domain 2 data 

  {
    domain2Data: [{
        "manager": "Manager Name",
        "subcat": "Subcategory name",
        "logo": {
          "prefpart": "logo-1",
          "secpart": "logo-2",
          "locpart": null
        }
      },
      {
        "manager": "Manager Name",
        "subcat": "Subcategory Name",
        "logo": {
          "prefpart": "logo-1",
          "secpart": "logo-2",
          "locpart": "logo-3"
        }
      },
      {
        "manager": "Manager Name",
        "subcat": "Subcategory Name",
        "logo": {
          "prefpart": "logo-1",
          "secpart": "logo-2",
          "locpart": "logo-3"
        }
      },
      {
        "manager": "Manager Name",
        "subcat": "Subcategory Name",
        "logo": {
          "prefpart": "logo-1",
          "secpart": "logo-2",
          "locpart": "logo-3"
        }
      },
    ]
  },

  // domain 3 data
  {
    domain3Data: [{
        "manager": "Manager Name",
        "subcat": "Subcategory name",
        "logo": {
          "prefpart": "logo-1",
          "secpart": "logo-2",
          "locpart": null
        }
      },
      {
        "manager": "Manager Name",
        "subcat": "Subcategory Name",
        "logo": {
          "prefpart": "logo-1",
          "secpart": "logo-2",
          "locpart": "logo-3"
        }
      },
      {
        "manager": "Manager Name",
        "subcat": "Subcategory Name",
        "logo": {
          "prefpart": "logo-1",
          "secpart": "logo-2",
          "locpart": "logo-3"
        }
      },
      {
        "manager": "Manager Name",
        "subcat": "Subcategory Name",
        "logo": {
          "prefpart": "logo-1",
          "secpart": "logo-2",
          "locpart": "logo-3"
        }
      },
    ]
  },

  //domain 4 data 
  {
    domain4Data: [{
        "manager": "Manager Name",
        "subcat": "Subcategory name",
        "logo": {
          "prefpart": "logo-1",
          "secpart": "logo-2",
          "locpart": null
        }
      },
      {
        "manager": "Manager Name",
        "subcat": "Subcategory Name",
        "logo": {
          "prefpart": "logo-1",
          "secpart": "logo-2",
          "locpart": "logo-3"
        }
      },
      {
        "manager": "Manager Name",
        "subcat": "Subcategory Name",
        "logo": {
          "prefpart": "logo-1",
          "secpart": "logo-2",
          "locpart": "logo-3"
        }
      },
      {
        "manager": "Manager Name",
        "subcat": "Subcategory Name",
        "logo": {
          "prefpart": "logo-1",
          "secpart": "logo-2",
          "locpart": "logo-3"
        }
      },
    ]
  }
]

function servTemplate(servicedata) {
  return `
    <div class="info-data" id="infodata">
        <table>
            <colgroup>
                <col width="30%"/>
                <col width="70%"/>
            </colgroup>
            <tr>
                <th colspan="2" class="header">
                <h3>${servicedata.subcat}</h3>  
                </th>
            </tr>
            <tr class="">
                <td class="title">
                    <h5>Section 1</h5>
                </td>
                <td class="text">
                    <img class="img-service" src="${servicedata.prefpart}">
                </td>   
            </tr>
            <tr>
                <td class="">
                    <h5>Section 2</h5>
                </td>
                <td class="">
                    <img class="img-service" src="${servicedata.secpart}">
                </td>
            </tr>
            <tr>
                <td>
                    <h5>Section 3</h5>
                </td>
                <td class="">
                    <img class="img-service" src="${servicedata.locpart}">
                </td>
            </tr>
        </table>
    </div>
    `
}

document.getElementById("serviceCat").innerHTML = `
${serviceData.map(servTemplate).join('')}
`

/*domain names and pics css*/

#domainCat {
  width: 100%;
}

.box__shadow {
  width: auto;
  height: auto;
  margin-top: 1em;
  display: flex;
  justify-content: center;
  align-items: center;
  float: left;
}

.myBtn {
  border: 0px solid #000000;
  outline: none;
  box-shadow: none;
  width: 260px;
  height: auto;
  background: none;
  margin: 1em 1.1em 5em 1.1em;
  padding: 0em -1em 5em -1em;
  float: left;
}

.myBtn:hover {
  outline: none;
  background: none;
  box-shadow: none;
  cursor: pointer;
}

.cover-bkg-ser-domain4 {
  background-color: #2BD5F2;
  margin: auto auto -2em auto;
  width: 90%;
}

.cover-bkg-ser-domain4:hover {
  background-color: rgba(165, 209, 238, 0.8);
}


/*list rendering css*/

#serviceCat {
  overflow: hidden;
  float: left;
  background-color: rgba(117, 117, 117, 0.8);
  /* Black w/ opacity */
  overflow: auto;
  /* Enable scroll if needed */
  width: 72.5%;
  /* Full width */
  height: 50%;
  /* Full height */
  top: 0;
  left: 0;
  margin-left: 2em;
}

.service-title {
  font-style: normal;
  font-weight: normal;
  font-size: 22px;
  text-align: center;
  color: #000000;
  width: 100%;
}

.info-data {
  width: auto;
  height: auto;
}

.img-service {
  width: 50%;
  margin: 1em;
  padding: 0em;
  display: block;
}

.header {
  width: 100%;
  background-color: #83e06c;
  text-align: center;
}

.row {
  display: inline;
  background-color: rgba(76, 76, 76, 0.4);
  width: 70%;
  height: auto;
  padding: 0.1em;
  margin: 0.2em;
}

.column-1 {
  width: 20%;
  height: auto;
  float: left;
  vertical-align: auto;
  margin-left: 2em;
  font-size: 20px;
  font-weight: bold;
}

.column-2 {
  width: 70%;
  height: auto;
  float: left;
  vertical-align: auto;
  margin-left: 2em;
}

table,
th,
tr {
  width: 100%;
}

<!DOCTYPE html>
<html>

<head>
  <title>Page Title</title>
</head>

<body>
  <section id="domainCat"></section>
  <section id="serviceCat"></section>

</body>

</html>

我只能将 jQuery 用作库，因为我正在尝试将代码放入 SharePoint webparts 中。

Answer 1

所以问题是您试图在动态创建的对象上添加点击侦听器。这里需要 4 个按钮，所以我们还应该在函数 domainTemplate() 中创建动态监听器；此外，我们需要在此处传递 index，以便我们可以了解我们正在单击哪个按钮并将类添加到所有按钮。

function domainTemplate(domaininfo, index) {
  $(document).on('click',`.btn-${index}`, function() {
  document.getElementById("serviceCat").innerHTML = servTemplate(serviceData[index]);

  return `
    ...some html here
    <button id="myBtn" class="myBtn btn-${index}" type="button">
  `;
});

我还修复了您的 servTemplate() 函数。我们需要调用对象，因此我们必须始终获取对象的第一项。所以现在 servicedata 如果我们这样称呼它是正确的。

function servTemplate(data) {
  const servicedata = data[Object.keys(data)[0]][0];

  return some html;
}

请在此处查看完整代码https://jsfiddle.net/yh915e6o/