Question

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

我的问题是我单击第一个按钮并显示数据库中的第一张图片，但您无法显示任何其他图片。我还使用了ORDER BY函数来测试其他照片是否正常工作。因此它似乎停留在数据库中的第一张照片上，或者首先排序后。 enter image description here

 <!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>

enter image description here

<!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>

Answer 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，以便为每个按钮上的click事件分配一个动作。

<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，
使用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.

Img Src或data-imgsrc Coldfusion

1 个答案: