Question

一般来说：我想要的是让PHP输出带有书籍的无序列表。当用户点击其中一个标题时，将从数据库中提取详细信息并使用AJAX将其插入页面。

我似乎无法弄清楚如何从＆lt;中提取标题值。 li>使用javascript，所以我可以将其传递给AJAX。

（为了简化示例代码，我省略了AJAX部分，而是使用警报。）

<html>
<head>
<script type="text/javascript">

window.onload = function()
{

      var shelve = document.getElementById( 'books' );
      var books = shelve.getElementsByTagName( 'li' );
      for( var i=0; i < books.length; i++ ){
         books[i].onclick = function(){
        alert(books[i].title); //I know this doesn't work
         };
      }
}

</script>
</head>
<body>

<div id="txtHint"><b>Book info will be listed here using AJAX.</b></div>

<?php show_allBooks(); ?>

</body>
</html>

<?php

function show_allBooks(){

    db_connect();
    $query = "Select * from tblBooks order by title";
    $result = mysql_query($query);
    echo "<ul id='books'>";
    while ($row = mysql_fetch_array($result))
    {
        echo "<li title='" . $row['id'] . "'>" . $row['title'] . "</li>";
    }
    echo "</ul>";
    db_close();
}
?>

我尝试使用以下代码的变体来愚弄，但这似乎也没有用。

books[i].getAttribute("title")

有人能指出我正确的方向吗？任何帮助将不胜感激。

Answer 1

当您的onclick处理程序被调用时，i已增加到books.length。相反，您可以引用this来获取元素。

var shelve = document.getElementById('books');
var books = shelve.getElementsByTagName('li');
for(var i = 0; i < books.length; i++) {
    books[i].onclick = function () {
        alert(this.title); 
    };
}

http://jsfiddle.net/gilly3/cPMAU/

但是，如果你做需要知道点击处理程序中i的值，你可以通过在工厂中创建处理程序来做到这一点，这是一个返回一个函数的函数功能：

function createBookHandler(books, i) {
    return function() {
        alert(books[i].title);
    };
}
var shelve = document.getElementById('books');
var books = shelve.getElementsByTagName('li');
for(var i = 0; i < books.length; i++) {
    books[i].onclick = createBookHandler(books, i);
}

http://jsfiddle.net/gilly3/cPMAU/1/

Answer 2

从

开始

books.item(i)

然后它取决于标题在列表中的存储方式。如果是

<li title="">

然后 books.item（ⅰ）.getAttribute（＆＃34;标题＆＃34）

但是关闭相关的答案可能更重要。

Javascript从<li> </li>获取标题值

2 个答案: