在列表项单击时无法获取我想要的文本答案

【问题标题】：Can't get text I want on list item click在列表项单击时无法获取我想要的文本
【发布时间】：2017-12-01 21:55:13
【问题描述】：

我是网页设计新手。 Javascript/HTML/CSS。来自安卓。我有一个从 firebase 检索的列表。我想点击列表项行并从中获取我的名字

    <p class= "lead">

在js文件中并将其传递给我的下一个 HTML 页面。我设法做到了这一点。

我的问题。无论我在框中单击何处，都会将其发送到下一页。例如：如果我单击框中的用户名，则会发送该用户名。我希望无论在框中的哪个位置被点击，都只会发送班级领导。

我昨天一整天都在谷歌上搜索，我找到的所有内容都与我目前的内容相同。

.html 文件

<!-- Latest compiled and minified CSS -->
<link href="css/styles.css" rel="stylesheet">

 </head>
 <body>

  <h1>Database</h1>
  <hr/>
    <div id="container" class="list">
      <ul id="toons" class="list-group">
        <!-- Conatct Object li.list-group-item.contact will be added here by js -->
      </ul>
    </div>


<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!-- Latest compiled and minified Bootstrap -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<!-- Include Firebase Library -->
<script src="https://cdn.firebase.com/js/client/2.2.3/firebase.js"></script>
<!-- Contacts Store JavaScript -->
<script src="js/scripts.js"></script>

.js 文件

  //create firebase reference
var dbRef = new Firebase("https://my-firebase.firebaseio.com/");
 var contactsRef = dbRef.child('toons');

  //load older conatcts as well as any newly added one...
  contactsRef.on("child_added", function(snap) {
    console.log("added", snap.key(), snap.val());
  document.querySelector('#toons')
.innerHTML += contactHtmlFromObject(snap.val());



});

//prepare conatct object's HTML
function contactHtmlFromObject(toons){
  console.log( toons );
  var html = '';
  html += '<li class="list-group-item contact">';
    html += '<div>';
      html += '<p class="lead">'+"john"+'</p>';
      html += '<p>'+"999-000-1234"+'</p>';
       html += '<p><small title="'
            +toons.photoUrl+'">'
            +"User Name: " + toons.userId
            +'</small></p>';
html += '</div>';
  html += '</li>';

  return html;
}
  var cars = document.querySelector(".list");

 cars.addEventListener("click", function(e)
{
 var toonName = (e.target.innerHTML);
  alert(toonName);

 window.location = 'toonInfo.html';
  window.sessionStorage.setItem('toon',toonName);

});

我有我的列表的屏幕截图，但我无法发布图片。

【问题讨论】：

尝试将事件监听器添加到联系人类，因为会有很多具有联系人类的元素，每个元素都有 .lead 元素。
您从未在代码中定义 myFunction
对不起。我将编辑并删除它。那是来自我正在尝试的其他事件侦听器。我尝试了很多我在网上找到的不同的东西......

标签： javascript html firebase firebase-realtime-database

【解决方案1】：

您可以使用 jQuery（您的 HTML 中已经包含它）

$(".list li").on("click", function() {
    alert($(this).find("p.lead").html());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<div>
  <ul class="list">
    <li>
      <p class="lead">A</p>
      <p>444-5555</p>
     </li>
    <li>
      <p class="lead">B</p>
      <p>444-5555</p>
    </li>
    <li>
      <p class="lead">C</p>
      <p>444-5555</p>
    </li>
  </ul>
</div>

【讨论】：

太棒了。谢谢。那行得通。只需要删除“li”
我刚刚意识到我仍然有一个问题。无论我点击哪个列表项，我总是得到第一个列表项“lead”
这就是为什么需要放li，如果不放li，$(this)就是.list元素，需要将事件绑定到.lead容器，在我的示例是
元素，可能在您的代码中是 .contact，尝试使用 $(".list .contact")

当尝试任何一个时，它绝对什么都不做。

您将

元素插入到

="list-group"> 元素，对吧？