img Src 或 data-imgsrc Coldfusion答案

【问题标题】：Img Src Or data-imgsrc Coldfusionimg Src 或 data-imgsrc Coldfusion
【发布时间】：2014-01-09 21:31:24
【问题描述】：

我想要做的是根据单击的按钮显示图像。到目前为止，这就是我所拥有的。我还遇到了一个叫做的东西。 http://rvera.github.io/image-picker/

我的问题是我点击了第一个按钮，出现了数据库中的第一张图片，但您无法显示任何其他图片。我还使用了 ORDER BY 函数来测试其他照片是否有效并且它们确实有效。所以它似乎卡在数据库中的第一张照片上，或者是排序后的第一张照片。

 <!DOCTYPE html>
 <html>
<head>
    <cfquery datasource="AccessTest" name="qTest">
        SELECT Account, Image, Image_ID
        FROM PictureDB
    </cfquery>
    <script src="http://code.jquery.com/jquery-2.0.3.js">

    </script>
    <script>
        $(document).ready(function(){
            $("button").click(function(){
                $("#div1").html('<img src="<cfoutput>#qTest.Image#</cfoutput>">');
            });
        });
    </script>
</head>
<body>
    <div id="div1">
        <h2>
            Display Image
        </h2>
    </div>
    <cfloop query="qTest">
        <button> 
         <cfoutput>
                <tr>
                    <td>
                        #qTest.Account#
                    </td>

                </tr>
            </cfoutput>
        </button>
    </cfloop>
</body>

<!DOCTYPE html>
<html>
<head>
    <cfquery datasource="AccessTest" name="qTest">
        SELECT Account, Image, Image_ID
        FROM PictureDB
    </cfquery>
    <script src="http://code.jquery.com/jquery-2.0.3.js">

    </script>
    <script>
        $(document).ready(function(){
            var _img = [];
            <cfoutput query="qTest">
                _img.push({'id': '#qTest.Image_ID#', 'src': '#qTest.Image#'});
            </cfoutput>
            console.log(_img);
        });


                       $("button").on('click', function(){
                var _id = $(this).data('image-id');
                console.log('Image ID: ' + _id + '.');
                // Find the corrosponding object in the _img array.
                var result = $.grep(_img, function(e){ return e.id === _id });
                // If only one is found, then reference the image src from the matching object.
                if (result.length === 1) {
                    console.log(result[0].src);
                    $("#div1").html('<img src="' + result[0].src + '">');
                } else {
                    // If none or more than one are found, show a warning.
                    console.warn('Could not find image ' + _id + '.');
                }
            });
        });
    </script>
</head>
<body>
    <div id="div1">
        <h2>
            Display Image
        </h2>
    </div>
    <cfoutput query="qTest">
        <button id="account_#qTest.Image_ID#" data-image-id="#qTest.Image_ID#">
            #qTest.Account#
        </button>
    </cfoutput>
</body>

【问题讨论】：

标签： javascript jquery html ms-access coldfusion

【解决方案1】：

首先，<button><tr><td>Something</td></tr></button> 不是有效的标记。您应该只在每个按钮标签之后输出一个<br>。

其次，您使用<cfloop> 正确呈现了帐户列表。但是，您只是将第一条记录的数据呈现到 JavaScript 部分。因此，每个被点击的按钮都只能显示相同的大图。

为了做你想做的事，你可以使用查询数据动态生成一个 JavaScript 数组，然后使用按钮上的 data-imageID 属性将单击的按钮映射到数组中的正确图像。然后，您将使用您的 jQuery 函数提取现在的客户端记录数据并填充 div1。

2013-12-24：让我们从头开始。

你有这个查询：

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

你有一个目标 DIV：

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

您可以使用 CFML 动态创建 HTML 按钮：

<cfloop query="qTest">
<button>#qTest.Account#</button>
</cfloop>

最后，您有了这个 JavaScript，以便为每个按钮上的点击事件分配一个动作。

<script>
    $(document).ready(function(){
        $("button").click(function(){
            $("#div1").html('<img src="<cfoutput>#qTest.Image#</cfoutput>">');
        });
    });
</script>

我创建了this JSFiddle 来显示生成的 HTML 的样子（使用我网站上的图片）。

最终输出：

<script>
$(document).ready(function(){
    $("button").on('click', function(){
        $("#div1").html('<img src="http://iknowkungfoo.com/static/icons/32/linkedin.png">');
    });
});
</script>

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

<button>Linked In</button>
<button>Facebook</button>
<button>Twitter</button>

文档中的每个按钮只能分配相同的图像。

使用 CFML 动态创建客户端 JavaScript

查询和目标 DIV 保持不变，但让我们更新您要生成的 HTML。

每个按钮都需要一个唯一的 DOM ID。使用 Image_ID 作为值的一部分来执行此操作。使用 HTML5 数据属性存储每个按钮对应的 Image_ID。

<cfoutput query="qTest">
    <button id="account_#qTest.Image_ID#" data-image-id="#qTest.Image_ID#">#qTest.Account#</button>
</cfoutput>

输出应如下所示：

<button id="account_1" data-image-id="1">Linked In</button>
<button id="account_2" data-image-id="2">Facebook</button>
<button id="account_3" data-image-id="3">Twitter</button>

现在我们需要一个 JavaScript 对象数组，其中包含客户端代码中的查询数据。

$(document).ready(function(){
    var _img = [];
    <cfoutput query="qTest">
        _img.push({'id': #qTest.Image_ID#, 'src': '#qTest.Image#'});
    </cfoutput>
    console.log(_img);
});

这最终会是这样的：

$(document).ready(function(){
    var _img = [];
    _img.push({'id': 1, 'src': 'http://iknowkungfoo.com/static/icons/32/linkedin.png'});
    _img.push({'id': 2, 'src': 'http://iknowkungfoo.com/static/icons/32/facebook.png'});
    _img.push({'id': 3, 'src': 'http://iknowkungfoo.com/static/icons/32/twitter.png'});
    console.log(_img);
});

现在我们可以通过

将所有这些联系在一起

为<button>s分配一个click处理程序，
它使用data-属性中的值
find the correct object from the JavaScript array
并将正确的图像渲染到目标 DIV 中。

$(document).ready(function(){
    var _img = [];
    _img.push({'id': 1, 'src': 'http://iknowkungfoo.com/static/icons/32/linkedin.png'});
    _img.push({'id': 2, 'src': 'http://iknowkungfoo.com/static/icons/32/facebook.png'});
    _img.push({'id': 3, 'src': 'http://iknowkungfoo.com/static/icons/32/twitter.png'});
    console.log(_img);

    $("button").on('click', function(){
        var _id = $(this).data('image-id');
        console.log('Image ID: ' + _id + '.');
        // Find the corrosponding object in the _img array.
        var result = $.grep(_img, function(e){ return e.id === _id });
        // If only one is found, then reference the image src from the matching object.
        if (result.length === 1) {
            console.log(result[0].src);
            $("#div1").html('<img src="' + result[0].src + '">');
        } else {
            // If none or more than one are found, show a warning.
            console.warn('Could not find image ' + _id + '.');
        }
    });

});

This can be seen in action here.

【讨论】：

"为了做你想做的事，你可以使用查询数据动态生成一个 JavaScript 数组，然后使用按钮上的 data-imageID 属性将点击的按钮映射到正确的图像数组。然后您将使用您的 jQuery 函数提取现在的客户端记录数据并填充 div1"......不完全确定如何执行此操作。
循环查询并创建一个 JS 数组。 @iKnowKungFoo 已经正确回答了这个问题。您的点击处理程序仅引用第一个查询行，因此这将是唯一显示的图像。您正在为所有按钮分配相同的单击处理程序并期望它们的行为不同。他也是正确的，您的 HTML 标记不正确。我建议您在继续之前先学习 HTML 和 JS 的基础知识。它将帮助您更好地了解您的问题。
更新了完整的演练。
嗯似乎无法显示？
你有 'id': '#qTest.Image_ID#' （一个字符串），它应该是 'id': #qTest.Image_ID# （一个整数）。使用 $.grep() 的代码行正在寻找返回 e.id === _id。 "===" 正在检查值和数据类型。 stackoverflow.com/questions/5447024/…