我网站上的每个食谱旁边都有一个切换按钮。我的数据库中有想要显示的图像。每个切换按钮将显示不同的图像。
如何动态检索图像路径？
我应该在我的 CSS 中添加一些 php，还是应该在 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)。
有几种方法可以做到这一点。您可以在 PHP 中解析页面时回显图像的路径，或者您可以使用 Ajax 连接到 PHP、图形和路径并将其返回到 JavaScript，您可以在其中将图像标记附加到 DOM。
我建议使用后一种方法，因为我认为它更正确。我看到你在呼应 $image_id。试着做
<img href="<?php echo $image_path; ?>">
让我知道这是否有效。如果不是，能否指定存储图片路径的表名和列名？您还使用任何 PHP 框架吗？
要列出数据库中的食谱，您可能在某处有这样的查询：
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
然后使用此查询的结果。