使用 Div 和 .load 显示图像答案

【问题标题】：Using Div's and .load to show images使用 Div 和 .load 显示图像
【发布时间】：2013-12-20 16:24:42
【问题描述】：

如何获取此代码以显示图像？我使用的是 iFrame，但被告知如果我最终想要将文本与每张图片链接，使用 Div 和 .load 会更好。尽管使用 Div，我似乎无法加载任何内容。

......

截至 2013 年 12 月 26 日，这是我现在所拥有的

我已经能够整合到目前为止我学到的所有信息。

<!DOCTYPE html>
 <html>
    <cfquery datasource="AccessTest" name="qTest">
        SELECT Account, Image, Image_ID
        FROM PictureDB
    </cfquery>

选择帐户、备注、用户、Image_ID 来自评论图片

    <script src="http://code.jquery.com/jquery-2.0.3.js"> </script>

<script>
$(document).ready(function(){

    var images = {

    <cfloop query="qTest">
    "<cfoutput>#qTest.Image_ID#</cfoutput>": "<cfoutput>#qTest.Image#</cfoutput>",
    </cfloop>
    };

    $("button").click(function(event){
        event.preventDefault();
        var id = $(this).data("id");
        var src = images[id];

        $("#theImage").attr("src", src).removeClass("hide");

    });

});
</script>

<div id="div1">
    <h2>Display Image</h2>
</div>

    <cfoutput query="qTest">
        <button data-id="#qTest.Image_ID#">#qTest.Account# </button>
    </cfoutput>
    <img id="theImage" class="hide">
</html>

【问题讨论】：

jquery.com/download 我用这个来下载下载未压缩的、开发的 jQuery 2.0.3 并将它放在我的文件所在的文件夹中。

标签： javascript jquery css ms-access coldfusion

【解决方案1】：

您需要将对#qTest.image# 的调用封装在<cfoutput></cfoutput> 中。否则CF不会处理。

<cfoutput>#qTest.image#</cfoutput>

此外，jQuery 的 load() 方法接受一个 URL 并从服务器加载数据。它不插入 HTML。

你想要类似的东西

$("#div1").html('<img src="<cfoutput>#qTest.Image#</cfoutput>">');

【讨论】：

只需循环查询并创建按钮：。您需要某种标识符，例如 ID 或 HTML5 data-* 属性，例如可以工作。然后在您的点击处理程序中，您将获取“imgsrc”数据值并在创建标记时使用它。
您需要一种方法来获取图像的路径。例如，如果您在其他地方引用了路径，则可以使用 ID。
您已经在运行查询以获取图像的 ID 和路径。你有这个数据。您需要在某个地方的 Javascript 中引用它们才能使用它们。您可以创建一个 Javascript 对象，例如使用 ID 作为键和路径作为值。然后在您的单击处理程序中，您可以根据单击的按钮确定 ID，并在 JS 对象中查找路径。这只是一个例子，有很多方法可以做到这一点，包括使用 ID 通过 ajax 查找图像的来源。
好的，只是为了让它更清楚一点...这里不使用 CF 是一个工作示例：jsfiddle.net/seancoyne/MM4Yj 现在，如果您想使用 CF，您可以轻松地使用您编写的查询，循环它并构建 JS 对象，然后再次循环它并创建按钮。这只是一个示例，但它似乎可以满足您的需求。
是的，它被称为 JOIN。您将编写查询并使用从一个表到另一个表的主键的外键将两个表连接在一起。正如我相信我在您的另一个问题中提到的那样，我认为您需要放慢速度并学习您尝试使用的技术。首先尝试一些简单的 SQL 查询和基本的 CF，然后继续让 jQuery 使用它们。 CF WACK 书籍非常适合通过一些简单的 SQL 和 CF 示例让您快速上手。而且，当我有你的时候，请不要使用 Access。使用真正的 DBMS。 MySQL 是免费且易于使用的。

【解决方案2】：

.load() 将从 url 信息加载，但您要做的是简单的 .append() 或 .html()。

这会将图像添加到您的 div 中。

【讨论】：