切換：從數據庫動態檢索圖像路徑

Question

我的網站上每個食譜旁邊都有一個切換按鈕。 我在我的數據庫中有圖像，我想要顯示。每個切換按鈕都會顯示不同的圖像。

如何檢索圖像路徑動態？

我應該有一些PHP到我的CSS或者我應該添加其他的JQuery代碼？

<div class="toggle" id="image<?php echo $recipe_id ?>"></div> 

的jQuery：

<script> 
$(document).ready(function(){ 
var $content = $(".content").hide(); 
$(".toggle").on("click", function(e){ 
$(this).toggleClass("expanded"); 
$(this).siblings('.content').toggle(); 
}); 
}); 
</script> 

CSS：

.toggle { 
background:url(/images/muffin.png) } 

現在，所有的切換按鈕顯示相同的虛擬圖像（muffin.png）。

Answer 1

要列出從數據庫中的食譜，你可能有這樣的地方查詢：

SELECT * FROM recipes 

並且您的PHP腳本可能通過這個查詢的結果後循環。

如果是這種情況，只要確保查詢選擇到圖像的路徑，然後做這樣的事情：

<div class="toggle" id="image<?php echo $recipe_id ?>" style="background:url(<?php echo $query_result["image_path"] ?>)"></div> 

如果不是這種情況，您可以執行一個查詢來獲取每個食譜的圖像路徑：

SELECT image_path FROM recipes WHERE recipe_id=$recipe_id 

然後使用此查詢的結果。

Answer 2

那麼有幾種方法可以做到這一點。您可以在頁面被解析爲PHP時回顯圖像的路徑，或者您可以使用Ajax連接到PHP，圖形和路徑並將其吐出οJavaScript，您可以在其中將圖像標籤附加到DOM。

我會推薦使用後面的方法，因爲在我看來它更正確。我看到你正在迴應$ image_id。嘗試做

<img href="<?php echo $image_path; ?>"> 

並讓我知道，如果這樣的作品。如果不是，您可以指定存儲圖像路徑的表名和列名嗎？你也使用任何PHP框架？