我如何使用JavaScript顯示唯一的PHP數據

Question

我有這個小項目，我正在使用php將數據存儲在數據庫中，然后將所有保存的數據作為列表異步加載到div中。 它工作正常，但我目前正面臨php-javascript危機...以下是發生情況的摘要

預期結果：

• 單擊列表時，顯示唯一的單擊標題

實際結果：

• 即使單擊其他標題，也始終顯示最后保存的標題。

拜托大家，我需要幫助以實現“預期”結果。

這是PHP代碼的片段

//users name
$uname = $_SESSION['username'];

//establishing connection to notes database
$dbconn = mysqli_connect('localhost','root','','notesdb');
if(!$dbconn){
    die("Connection failed:". mysqli_connect_error($dbconn));
}

//order by desc i.e Most recent appears always at the top
$result1 = mysqli_query($dbconn,"SELECT * FROM notes_log ORDER BY id DESC");
/*
loops through the query result and presents it in  an array i.e 
'username:title:body:date' and is displayed in the notes-log div.
*/
while($extract = mysqli_fetch_array($result1)){
if($extract['username'] === $uname){
    $title = $extract['note-title']; 
echo "<div class='saved-note' >";
echo "<a href='#'><span id='note-title' class='note-title' onclick='displayNote()'>". truncate($title) ."</span></a>";
echo "<div class='trig-dropdown'><span class='fa fa-ellipsis-v' id='fa-ellipsis-v'></span><div class='dropdowncontent-noteslog' id='dropdowncontent-noteslog'><a href='#'>delete</a></div></div>";
echo " <span id='note-date'> " .$extract['date-saved']."</span>";
echo "</div>";
}

}

JS

function displayNote(){
var res = document.getElementById("note-title");
alert(res.innerHTML);     
}

Answer 1

方法1：

嘗試在您的onclick函數中傳遞this ，

<span id='note-title' class='note-title' onclick='displayNote(this)'>

並在javascript上獲取您的參數。

<script type="text/javascript">
function displayNote(this){
  alert(this.innerHTML)
}</script>

那應該工作。

注意：最好讓您的ID在每個循環中都是唯一的。

---

方法2：

使您的ID對於每個循環都是唯一的。

echo "<span id='note-title-".$i."' class='note-title' onclick='displayNote()'>"

您的ID將為note-title-0 ， note-title-1等。