Img Src或data-imgsrc Coldfusion

首先,<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>

我创建了这个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-属性为,则使用值

从JavaScript数组中找到正确的对象

并将正确的图像渲染到目标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 + '.');
        }
    });

});

这可以在这里看到.