在javascript中調用PHP變量

Question

我想從PHP中調用HTML/Javascript中的變量（id），其中來自DB的行的ID將從錨點發送到另一個頁面，以便行詳細信息可以在一張桌子上查看。

var eventContent = $('<div class="event-info">' + '<h4 class="event-name">' + point.name + '</h4><hr>' + 
     '<span><h5>Date: </h5>' + 
     '<p class="event-date">' + point.edate + '</p></span>' + 
     '<p class="event-description">'+ point.description +'</p>' + 
     '<input type="button" id="view-event" class="btn btn-info btn-sm" onclick="showDetails();" value="View Event" />'+ 
     '<a href="details.php<?php echo $id; ?>" class="btn btn-danger btn-sm">Remove Event</a>' + 
     '</div>'); 

因此，例如，出現了一批保存並顯示不同的事件，並點擊查看按鈕時 - 它會打開一個新頁面，在表格中顯示具有該ID的事件。

UPDATE： 我也嘗試過通過建立在PHP/HTML詳細信息列表：

$result = mysqli_query($con,"SELECT * FROM events"); 

       while($row = mysqli_fetch_array($result)) 
       { 
        echo "<div class='event-details' id='event-details' style='display: none'>"; 
        echo "<h3>Event Details</h3>"; 
        echo "<table class='table'>"; 
        echo "<tr><th>Event Name: </th><td>" . $row['name'] . "</td></tr>"; 
        echo "<tr><th>Event Date: </th><td>" . $row['edate'] . "</td></tr>"; 
        echo "<tr><th>Event Type: </th><td>" . $row['category'] . "</td></tr>"; 
        echo "<tr><th>Event Details: </th><td>" . $row['description'] . "</td></tr>"; 
        echo"</table>"; 
        echo "<td><a href='details.php?id=".$row['id']."' class='btn btn-warning btn-sm'>View</a></td></div>"; 
       } 

然後，它會在JavaScript中，使用的clone（）：

var eventList = $("#event-details").clone().show(); 

google.maps.event.addListener(event_markers[i], "click", function() { 
     infowindow.setContent(eventList[0]); 
     infowindow.open(map, event_markers[i]); 
     map.setCenter(marker.getPosition()); 
     map.setZoom(10); 
    }); 

現在這種方式發送ID輸入，但它發送相同的ID到每個項目 - 目前有5行數據庫的ID從6到10，但是當頁面加載時，它發送第一個ID（6）全部事件，而不是給每一個它自己的唯一ID來自數據庫。

Answer 1

您的代碼可能會走這條路：

var id = <?php echo $id; ?>; 
var eventContent = $('<div class="event-info">' + '<h4 class="event-name">' + point.name + '</h4><hr>' + 
     '<span><h5>Date: </h5>' + 
     '<p class="event-date">' + point.edate + '</p></span>' + 
     '<p class="event-description">'+ point.description +'</p>' + 
     '<input type="button" id="view-event" class="btn btn-info btn-sm" onclick="showDetails();" value="View Event" />'+ 
     '<a href="details.php?id=' + id + '" class="btn btn-danger btn-sm">Remove Event</a>' + 
     '</div>'); 

---

然而，我覺得這是一個更加簡潔：

<div class="event-info"> 
    <h4 class="event-name"></h4> 
    <hr> 
    <span> 
    <h5>Date: </h5> 
    <p class="event-date"></p> 
    </span> 
    <p class="event-description"></p> 
    <input type="button" id="view-event" class="btn btn-info btn-sm" 
    onclick="showDetails();" value="View Event" /> 
    <a class="btn btn-danger btn-sm">Remove Event</a> 
</div> 

// below is the javascript example for your manipulations 

var id = <?php echo $id; ?>; 
$('h4.event-name').html(point.name); 
$('p.event-date').html(point.edate); 
$('p.event-description').html(point.description); 
$('p.event-description').html(point.description); 
$('div.event-info a.btn').attr('href', 'details.php?id='+id); 

對於後者，您可以爲您的活動數據的容器（例如，如果您必須在同一頁面中顯示更多這些內容），然後從數據庫中生成一個ID列表。具體的步驟是：

• 有一個div準備（像一個空模板）
• 得到事件的列表（作爲一個數組，或更好的，JSON）
• 從PHP傳遞列表中的JavaScript成一個JS變量通過與JS
  • 陣列爲他們每個人（或者做一個AJAX調用）
  • 迭代，克隆容器和分配一個唯一的ID給它
  • 你就會有一個每個容器稍作修改JavaScript代碼的版本（見下文）

所以你不會擔心可讀性和可重用性。

var id = point.id; 
$('div#' + id + ' h4.event-name').html(point.name); 
$('div#' + id + ' p.event-date').html(point.edate); 
$('div#' + id + ' p.event-description').html(point.description); 
$('div#' + id + ' p.event-description').html(point.description); 
$('div#' + id + ' div.event-info a.btn').attr('href', 'details.php?id='+point.id); 

一如既往，進一步的改進和建議是非常值得歡迎的。

Answer 2

看起來你的服務器正在返回一些事件數據。讓它返回事件ID。

例如，如果您的頁面爲各種事件返回JSON，請將ID包含在JSON對象中。