2

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

我似乎无法弄清楚如何使用 javascript 从 <li> 中提取标题值，因此我可以将其传递给 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")

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

4

2 回答 2

3

到您的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/

于 2012-05-30T19:24:21.250 回答
0

从...开始

books.item(i)

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

<li title="">

然后是books.item(i).getAttribute("title")

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

于 2012-05-30T19:27:41.780 回答