Img Src或data-imgsrc Coldfusion
Mic*_*ney 1 html javascript coldfusion jquery ms-access
我要做的是根据点击的按钮显示图像.到目前为止,这就是我所拥有的.我也碰到了一些叫做的东西.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>
首先,<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 + '.');
}
});
});- 遍历查询并创建JS数组.@iKnowKungFoo已正确回答了问题.您的点击处理程序仅引用第一个查询行,因此这将是唯一要显示的图像.您正在为所有按钮分配相同的单击处理程序,并期望它们的行为不同.他的HTML标记不正确也是对的.我建议您在继续之前先学习HTML和JS的基础知识.它可以帮助您更好地理解您的问题. (2认同)