Добавление ссылки в список, чтобы показать свои данные - PullRequest
0 голосов
/ 22 сентября 2018

В моем веб-приложении каждый раз, когда пользователь создает классную комнату, данные сохраняются в базе данных Firebase, а затем извлекаются и отправляются в Классная комната: , как показано на изображении .

Теперь, как мне добавить или сделать ссылку в списке, чтобы при нажатии на конкретную классную комнату она показывала мне такую ​​информацию, как имя класса, учитель, который его создал, студенты и т. Д.

Вот мой код:

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);
 }
}

Получение данных из базы данных базы данных и отправка их в список

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>

1 Ответ

0 голосов
/ 22 сентября 2018

Пожалуйста, проверьте ответ как якорный тег

roomNames [ключ] .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';
     }
  }
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...