JavaScript(firebase): how can the firebase database key of a clicked item be obtained?

Question

我有一个像这样的 firebase 数据库结构

我有一个循环函数

 var jobTitle = document.getElementById('jobTitle');
     var jobDescription= document.getElementById('jobDescription');

         firebase.auth().onAuthStateChanged((user) => {
        if (user) {
              database = firebase.database();

             var ref = database.ref('/Jobs/');
          ref.on('value', gotData,  errData);

  }
  })

  var jobSnap = {};

   function gotData(data) { 
        var date = Today;
        var jobs = data.val();
        var keys = Object.keys(jobs);

        var container = document.getElementById('pos_1'); 
        var container2 = document.getElementById('jobapp'); 

        for (var i = 0; i<keys.length; i++) {
        var k = keys[i];
        var newCard = `

            <li class="pos-card" id="pos_1">
                  <div class="content">
                    <div class="title new">`+jobs[k].JobTitle+`</div>
                    <div class="dept">Customer Service</div>
                    <div class="date">date</div>
                    <div class="refer">Apply</div>
                  </div>
                  <ul class="desc">

                    <li>`+jobs[k].JobSummary+`</li>
                  </ul>
            </li>
        `;
        container.innerHTML += newCard;
        }
      }


    function errData(err) {
          console.log('Error!');
          console.log(err);
        }

这是将应用程序提交到相应作业 ID 下的数据库的函数。

    function newApplication() {

      var database = firebase.database();
      var applicant_Name = document.getElementById('name').value;
      var applicant_Number = document.getElementById('phone').value; 
      var applicant_email = document.getElementById('email').value; 
      var AuthorId = firebase.auth().currentUser.uid;
      var cover_letter = document.getElementById('cover_letter').value;


      var JobId = jobSnap.key;

      var postData = {
              ApplicantName: applicant_Name,
              ApplicantNumber: applicant_Number,
              Applicantemail: applicant_email, 
              Author: AuthorId,
              Cover_letter: cover_letter,
          };

      var newPostKey = firebase.database().ref().child('Applications').push().key;    

      var updates = {};


          updates['/Applications/' + newPostKey] = postData;
          updates[ JobId + '/Applications/' + newPostKey] = postData;

      return firebase.database().ref().update(updates); 

  }

检索数据库作业节点中的所有条目并像这样显示它们

当用户单击作业上的“应用”按钮时，应用程序会淡入；检索作业和应用程序的所有代码都在同一个 html 文件中。我需要做的是找到一种方法来捕获所单击的作业的 firebase 作业键，以便我可以将作业申请保存在相应的作业下。我尝试了很多方法，但仍然没有成功，我该如何实现呢？

Answer 1

您需要跟踪 HTML 中每个项目的键。一种常见的方法是将其注入(inject) HTML 中的 id 属性中:

    var newCard = `
        <li class="pos-card" id="${k}">

然后，当用户单击某个元素时，您可以使用该 id 在数据库中查找该项目。

编写代码的更惯用的方法是:

function gotData(data) { 
    var date = Today;

    var container = document.getElementById('pos_1'); 
    var container2 = document.getElementById('jobapp'); 

    data.forEach(function(jobSnap) { // loop over all jobs
      var key = jobSnap.key;
      var job = jobSnap.val();
      var newCard = `
        <li class="pos-card" id="${key}">
              <div class="content">
                <div class="title new">${job.JobTitle}</div>
                <div class="dept">Customer Service</div>
                <div class="date">${date}</div>
                <div class="refer">Apply</div>
              </div>
              <ul class="desc">
                <li>${job.JobSummary}</li>
              </ul>
        </li>
    `;
    container.innerHTML += newCard;
    }
  }