Question

我有一个如下所示的列表，Appended List

这是HTML代码：

     <!-- Two Line List with secondary info and action -->

  <ul id = "contactList" class="demo-list-two mdl-list">
    <li class="mdl-list__item mdl-list__item--two-line">
      <span class="mdl-list__item-primary-content">
        <i class="material-icons mdl-list__item-avatar">person</i>
        <span id="contactId" class="contactId1">Name</span>
        <span class="contactInformation mdl-list__item-sub-title">Information</span>
      </span><div class="mdl-layout-spacer"></div>
      <span class="mdl-list__item-secondary-content">
        <span class="mdl-list__item-secondary-info"></span>
        <a class="mdl-list__item-secondary-action" href="#"><button id="viewContact" onclick="viewContact1()" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--colored">
  View
</button></a>
      </span>
    </li>

  </ul>

这是javascript代码：

    function show(){
  $("#contactList li").remove();

var user = firebase.auth().currentUser;

if (user != null) {
user.providerData.forEach(function (profile) {
    var email = profile.email;
    var emailsplit = email.split(".")
    var userid = emailsplit[0]
    var contact = emailsplit[1]
var test = document.getElementById("test");
test.innerHTML = userid;

var firebaseRef1 = firebase.database().ref("Ecard/business cards" + userid).orderByKey();


firebaseRef1.once('value', function(snapshot) {
snapshot.forEach(function(childSnapshot) {
  var id = childSnapshot.key;
  var Information = childSnapshot.val();
  // ...

    // ...


  $("#contactList").append("<li class='mdl-list__item mdl-list__item--two-line'><span class='mdl-list__item-primary-content'><i class='material-icons mdl-list__item-avatar'>person</i><span class='contactId1' id='contactId'>" + id + "</span><span class='contactInformation mdl-list__item-sub-title'>" + Information + "</span></span><div class='mdl-layout-spacer'></div><span class='mdl-list__item-secondary-content'><span class='mdl-list__item-secondary-info'></span><a class='mdl-list__item-secondary-action' href='#viewContact'><button id='viewContact' onclick='viewContact1()' class='mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--colored'>View</button></a></span></li>");

  });
});
});
}
});
// ...

我想对视图按钮进行编程，以便从＆＃34; contactInformation＆＃34;中继/获取数据。和＆＃34; contactId＆＃34;对于其特定的列表项。到目前为止，我实现了这个：

function viewContact1(){
  var id =  document.getElementById("contactId").innerHTML;

    alert(id);

但它只返回第一个List项而不是它所在的列表项。我该如何解决这个问题？

PS。来自数据库的信息具有随机生成的密钥，并且由应用程序的用户添加和删除，因此它从不会有一定数量的数据。

单击第二个列表项中的视图后

： screenshot 2

Answer 1

这是因为在您创建新联系人时，您将继续创建“contactId”ID。由于你有很多这样的方法，所以方法将获得第一个而不是像你一样追加考虑创建动态视图和按钮（DOM节点）并在其后附加监听器：

var ul = document.getElementById("contactList");
var li = document.createElement("li");
li.className = "mdl-list__item mdl-list__item--two-line"
//Create you spans etc. I am skipping to button for detailed info look HTML DOM Nodes
var button = document.createElement("button")
button.append(document.createTextNode("View"))
button.addEvenetListener('click', function(){
  //This id is the id that you have declared
  alert(id);

});
li.append(button);
ul.append(li)

通过这种方式，您将创建不同的实例

尝试使用按钮

1 个答案: