如何在我的列表中添加链接并检索数据？

Question

创建新教室后，数据将被发送到如下所示的列表：

现在，我如何在每个教室中添加/制作（a）链接，以便每当我点击它时，它都会将我重定向到一个页面并向我显示他们的特定数据，例如 ClassroomID、学生等。

代码如下：

//retrieving

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];

    });


});

//adding
function classcreation(q) {
    var checkcn = document.getElementById('classroomName').value;
    if (checkcn == "" && checkcn == null) {
        alert("Empty Class Name!!");
    } else {
        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);

    }
}


function generateId() {
    return 'xxxx-xxxx-xxxx'.replace(/[x]/g, function () {
        return (Math.random() * 9 | 0).toString();
    })
}

Answer 1

我认为您正在寻找的是在您的 li 中添加一个 Anchor 标签，单击该标签会将您重定向到显示课程详细信息的页面。 如果是这种情况，请将代码中的以下行编辑为（如果模板字符串有效，则使用字符串连接来创建适当的字符串）

li.innerHTML += `<a href=${link}>roomNames[key]</a>`

如果您想在同一 HTML 中添加课堂详细信息而不重定向用户，请尝试关注。

这会将一个 div 附加到现有的 HTML 中，您将在其中显示类信息。

var infoDiv = document.createElement('div');
infoDiv.id = 'classInfo';

在您的 ul 上添加具有以下功能的 onclick 侦听器。

ul.onclick = (e) => {
    document.getElementById('classInfo').innerHTML = generateClassInfo(e.target.name); 
}

并在您的 li 中添加唯一标识类的名称。

li.name= identifier

将 onclick 添加到 ul 而不是 li 减少了 onclick 侦听器的数量，这基本上是一种性能优化。

查看代码沙箱以了解工作示例。 https://codesandbox.io/s/q9w9x0vlww