带有附加传递的jQuery onclick参数

Question

我目前正在尝试将可变数量的文本添加到列表中。每个项目都需要是可单击的，并将其自身的值传递给函数。我似乎无法使它正常工作，并继续在HTMLAnchorElement.onclick 错误中未定义“对象”，其中object是列表中对象的名称。这是我正在使用的代码：

if (user) {
  id = user.uid;
  ref = firestore.collection("Users").doc(id);
  console.log(user);
  console.log(ref.get());

  ref.get().then(function(doc){
    nameString = doc.data().name;
    console.log(nameString);
    const outputHeader = document.querySelector("#headMain");
    const outputInfo = document.querySelector("#genInfo");
    outputHeader.innerText = "Welcome " + nameString;
    outputInfo.innerText = "Create a class or choose a class from the left";
  });

  firestore.collection("Users").doc(id).collection("Classrooms").get().then(function(querySnapshot){
    querySnapshot.forEach(function(doc){
      classNameString = doc.id;
      console.log(doc.id, " => ", doc.data());
      $("li").append('<a href = # onclick = "testInfo('+doc.id+')">'+doc.id+'</a><br/>');
    });
  });
} 

当前的testInfo函数如下：

function testInfo(val){ console.log(val); }

Answer 1

以下html代码无法正常工作

<a href = # onclick = "testInfo('+doc.id+')">'+doc.id+'</a>

您缺少双引号，因此onclick在锚元素（“＃”）上执行

您想要做的是：

<a href="#" onclick="testInfo(\''+doc.id+'\')">'+doc.id+'</a>