Question

我网站上的每个食谱旁边都有一个切换按钮。我想要显示我的数据库中的图像。每个切换按钮都会显示不同的图像。

如何动态检索图片路径？

我应该在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）。

Answer 1

有几种方法可以做到这一点。您可以在PHP中解析页面时回显图像的路径，或者您可以使用Ajax连接到PHP，图形和路径并将其吐回到JavaScript中，您可以将图像标记附加到DOM。

我建议使用后面的方法，因为在我看来它更正确。我看到你正在回应$ image_id。尝试做

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

如果有效，请告诉我。如果没有，您可以指定存储图像路径的表名和列名吗？你也在使用任何PHP框架吗？

Answer 2

要列出数据库中的食谱，您可能会在某处查询：

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

然后使用此查询的结果。

切换：动态检索数据库中的图像路径

2 个答案: