2

一般的に：私が欲しいのは、PHPに本を含む順序付けられていないリストを出力させることです。ユーザーがタイトルの1つをクリックすると、詳細がDBから取得され、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 に答える