我必须编写一个PHP程序，在其中显示JSON文件中的人的数据。默认视图仅显示人员的姓名。如果我点击其中一个元素，视图应该会更改为点击人员的完整信息，然后是姓名，电话号码和电子邮件。
我的问题是，我不知道如何改变视图从一个到另一个
这就是我目前所知道的
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="skript.js"></script>
<title>Main</title>
</head>
<body>
<header>
<h1>Main</h1>
</header>
</nav>
<main class="view">
</main>
</body>
</html>// js
fetch('data.json')
.then(response => response.json())
.then(data => createListContact(data));
/**
* Function to display as a list data.json
*/
function createListContact(data) {
// create ol for all persons
const ol = document.createElement('ol');
ol.classList.add("list-view");
// for each person one li
for (let i = 0; i < data.personen.length; i++) {
const li = document.createElement('li');
li.classList.add("button");
li.setAttribute("id", i+1);
li.innerHTML ='Name: '+ data.personen[i].nachname + ', ' + data.personen[i].vorname;
ol.appendChild(li);
document.body.appendChild(ol);
}
}
/*
* Function adds event listener to li element
*/
function eventListener (){
const liElements = document.getElementsByTagName("li");
for (let li of liElements){
li.addEventListener("click",() => showDetails(li));
}
}
/**
* Function to open detailed info
*
* @param li element to show details from
*/
function showDetails(li){
var details = document.createElement('div');
details.className = 'details';
details.id ="test";
var close = document.createElement('div');
close.className= 'close';
close.innerHTML= 'close';
close.onclick = function(e) { details.parentNode.removeChild(details)};
var info = document. createElement('li');
info.innerHTML = 'Name: '+ data.personen[i].nachname + ', ' + data.personen[i].vorname +
'Tel.: '+ data.personen[i].telefonnummer+
'E-mail: '+data.personen[i].email;
details.appendChild(info);
details.appendChild(schließen);
document.body.appendChild(details);
}// css
body {
background-color: #886b6b77;
}
p {
color: #333;
font-family: "Times New Roman", Times, serif;
font-size: 20px;
text-align: center;
}
textarea
{
font-family: inherit;
}
form {
border: 1px solid black;
width: 90%;
background-color: whitesmoke;
margin: 0 auto;
padding: 0 1em;
}
form label {
display: block;
font-size: 0.8em;
color: darkslategrey;
padding-left: 3px;
}
input,
textarea
{
width: 100%;
font-size: 1.1em;
padding: 4px;
font-family: inherit;
font-weight: lighter;
border:1px solid gray;
outline: none;
border-radius: 0.3em;
}
input:focus,
textarea:focus {
border:1px solid orange;
}
input[type=submit] {
background-color: #ffffff77;
cursor: pointer;
width: 14em;
padding: .3em 0;
border-radius: 0.7em;
margin-bottom: 1em;
}
input[type=submit]:hover {
background-color: rgb(59, 58, 58);
box-shadow: 2px 2px 2px grey;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
margin-bottom: 1em;
}
ul li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
ol{
list-style-type: none;
text-align: center;
color: white;
}
/* Change the link color to #111 (black) on hover */
li a:hover {
background-color: #111;
}
img{
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}
#wahl{
margin-top: 1em;
margin-bottom: 0.5em;
}
#button_load{
margin-bottom: 1em;
}
/*
* list-view
*/
.list-view .button {
cursor: pointer;
background: none;
font-size: 20px;
color: white;
font-family: "Times New Roman", Times, serif;
}
.list-view .button:hover{
background-color: #333;
}
1条答案
按热度按时间ktca8awb1#
您可以将JSON数据附加到DOM元素（
<li>）本身：li.personData = person;其中person是包含名称等的对象。然后，当您需要显示细节时，很容易获得数据（e.target.personData具有对象）。我还将eventlistener移到了有序列表元素（
<ol>）。然后，您只需要测试用户单击的是否是列表元素。