Question

在我的网络应用上，每次用户创建教室时，数据都会保存到firebase数据库中，然后将在 Classroom：下进行检索和发送，如{{3} }。

现在，如何在列表中添加或建立链接，以便当我单击特定教室时，它将向我显示其信息，例如班级名称，创建班级的老师，学生等。

这是我的代码：

function classcreation(q) {
var usuid = generateId();
var myClasses={};
myClasses.TheClass = document.getElementById('classroomName').value;
myClasses.Teacher = user.displayName;
myClasses.TeacherID = user.uid;
myClasses.ClassID = usuid;
fbclass.child(user.uid).push().set(myClasses);
 }
}

从数据库Firebase检索数据，然后将其发送到列表中

var userRef = firebase.database().ref().child('Classes' + '/' + user.uid);
userRef.on('child_added', function(data) {

var roomNames = data.val().TheClass;

var ul = document.createElement('ul');
document.getElementById('myList').appendChild(ul);

var li = document.createElement('li');
ul.appendChild(li);
Object.keys(roomNames).forEach(function(key){
     li.innerHTML += roomNames[key].link(roomNames);

    });


});

li.innerHTML + = roomNames [key] .link（roomNames）; 尚不起作用，它只会将我重定向到另一个html。

我需要添加什么？

HTML：

<html>
<head>
<meta charset="utf-8">
<title>G</title>
</head>
<body>
<h4> Welcome: <span id ="user_name"></span></h4>
<h4>Role: <span id = "user_role"></span></h4>
<br>
<br>
<h3><span id = "jobRole"></span></h3>
<input type="text" id="classroomName"/>
<div id ="teacher_btn">
<button id="create_classBTN">Create</button>
</div>
</br>
<h3><span id = "ListClass"></span></h3>
<div id="myList"></div>

<br> <br>
<button type="button" onclick="logout()">Logout</button>

Answer 1

请检查响应是否类似于锚标记

roomNames [key] .link（roomNames）应该像<a href="http://www.goole.com">Anchor</a>

var ul = document.createElement('ul');
document.getElementById('mainbar').appendChild(ul);

var li = document.createElement('li');
ul.appendChild(li);
//Object.keys(roomNames).forEach(function(key){
    setTimeout(function(){ li.innerHTML += '<a 
     href="http://www.goole.com">Anchor</a>';},5000);

  //  });

添加点击处理程序

var userRef = firebase.database().ref().child('Classes' + '/' + user.uid);
userRef.on('child_added', function(data) {

var roomNames = data.val().TheClass;

var ul = document.createElement('ul');
document.getElementById('myList').appendChild(ul);

var li = document.createElement('li');
ul.appendChild(li);
Object.keys(roomNames).forEach(function(key){
     var classDetails = data.val();
   li.innerHTML += '<span onclick="clickDone(this);">'+roomNames+'</span><ul style="display:none"><li>Class Id : '+classDetails.ClassID+'</li><li>Teacher Id : '+classDetails.TeacherID+'</li><li>Teacher : '+classDetails.Teacher+'</li><li> Class : '+classDetails.TheClass+'</li></ul>';

    });


});

最后添加此功能

function clickDone(thisVar){ 
     var is = thisVar.nextSibling.style.display;
     if(is == 'none'){
         thisVar.nextSibling.style.display = 'block';
     }else{
         thisVar.nextSibling.style.display = 'none';
     }
  }

在列表上添加链接以显示其数据

1 个答案: