在列表中添加链接以显示其数据答案

【问题标题】：Adding link on list to show its data在列表中添加链接以显示其数据
【发布时间】：2018-09-22 04:32:36
【问题描述】：

在我的网络应用程序上，每次用户创建教室时，数据都会保存到 firebase 数据库，然后将在 Classroom: 下检索和发送，如image 所示。

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

这是我的代码：

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>

【问题讨论】：

看来li.innerHTML 的作用是链接到另一个URL。您打算如何在您的页面上显示TheClass 对象的详细信息？您可能希望考虑 onClick 而不是房间名称的超链接，并显示 (show) 一个隐藏的 div，该 div 将具有 TheClass 对象属性。请同时使用相关的 HTML 标记更新您的问题 - 这将有助于使问题更加清晰。
我已经更新了这个问题。你如何在javascript上添加onClick？
您已经有一个与相同问题相关的问题以及答案和解决方案：stackoverflow.com/questions/52446430/…
我不知道如何使用 Firebase。可以帮助和教我怎么做吗？
哦，好的。这应该不是很难。您可能希望开始参考有关使用列表的官方文档：firebase.google.com/docs/database/web/read-and-write 此外，如果您喜欢一些视频教程，请参考：youtube.com/watch?v=noB98K6A0TY

标签： javascript firebase web firebase-realtime-database

【解决方案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';
     }
  }

【讨论】：

我可以把我的代码发给你吗？Zigri 先生，这样你就可以分析我犯了什么错误或缺少什么代码？
我删除了 .link(roomNames) 以便它不会将我重定向到另一个页面。点击后如何显示教室数据？
这里是link。问题出在 home.js 部分，我相信它不会在 stackblitz 上运行，请尝试使用 localhost 或 firebase deploy。非常感谢先生！对不起所有的麻烦
如果你能帮我解决它，请告诉我:(我在等待
它说 Uncaught ReferenceError: clickDone is not defined