Question

我是网页设计的新手。的JavaScript / HTML / CSS。来自android。我有一个列表，我从firebase检索。我想点击列表项行并从

获取我的名字

    <p class= "lead">

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

我的问题。无论我在框中点击什么，这都是发送到下一页的内容。例如：如果我在框中单击用户名，则会发送该用户名。我希望无论在框中的哪个地方被点击，只有班级导致被发送。

我昨天整天搜索了Google，我找到的所有内容与我目前的相同。

.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);

});

我有我的列表的截图，但我无法发布img。

Answer 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>

无法在列表项上获取我想要的文字点击

1 个答案: