使用Javascript和ColdFusion链接注释和注释 [英] Linking Remarks and Comments with Javascript and ColdFusion
问题描述
使用ColdFusion，Access和Javascript，我已经能够设置一个程序，当你触摸一个按钮，它给你一张照片。然后我使用JOIN方法链接数据库中的两个工作表。现在我想做的是将JOIN加入到程序中，以便当我点击图像时，它显示通过Image_id与图像相关联的备注。有人可以帮我显示与每个图像关联的备注吗？
Using ColdFusion, Access and Javascript, I have been able to set up a program that when you touch a button it gives you a photo. Then I have used the JOIN method to link two worksheets in the database. Now what I am trying to do is work the JOIN into the program so that when I click a Image it shows the Remarks that are associated with the Image through the Image_id. Can someone help me with displaying the remarks associated with each Image?
<!DOCTYPE html>
<html>
<cfquery datasource="AccessTest" name="qTest">
SELECT Account, Image, Image_ID
FROM PictureDB
</cfquery>
<cfquery datasource="AccessTest" NAME=qtest2>
SELECT *
FROM CommentsDB AS C
INNER JOIN PictureDB AS P
ON C.Image_ID = P.Image_ID
</cfquery>
<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>
我进行更改后的新代码。
New code after I made the changes.
<!DOCTYPE html>
<html>
<cfquery datasource="AccessTest" name="qTest">
SELECT Account, Image, Image_ID
FROM PictureDB
</cfquery>
<cfquery datasource="AccessTest" NAME=qtest2>
SELECT *
FROM CommentsDB AS C
INNER JOIN PictureDB AS P
ON C.Image_ID = P.Image_ID
</cfquery>
<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>
};
var descs= {
<cfloop query="qtest2">
"<cfoutput>#qtest2.Image_ID#</cfoutput>": "<cfoutput>#qtest2.Remarks#</cfoutput>",
</cfloop>
};
$("button").click(function(event){
event.preventDefault();
var id = $(this).data("id");
var src = images[id];
var desc = descs[id];
$("#theImage").attr("src", src).removeClass("hide");
$("#theDescription").html(desc).removeClass("hide");
});
});
</script>
<body>
<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">
<div id="theDescription" class="hide">
</html>
</body>
查看源代码代码
<!DOCTYPE html>
<html>
<script src="http://code.jquery.com/jquery-2.0.3.js"> </script>
<script>
$(document).ready(function(){
var images = {
"1": "Test1.png#Test1.png#",
"2": "Test2.png#Test2.png#",
"3": "Test3.png#Test3.png#",
"4": "Test4.png#Test4.png#",
"5": "Test5.png#Test5.png#",
"6": "Test6.png#Test6.png#",
};
var descs= {
"5": "Test5",
"6": "Test6",
"1": "B Test",
"1": "A Test",
"2": "Test2",
"3": "Test3",
"4": "Test4",
};
$("button").click(function(event){
event.preventDefault();
var id = $(this).data("id");
var src = images[id];
var desc = descs[id];
$("#theImage").attr("src", src).removeClass("hide");
$("#theDescription").html(desc).removeClass("hide");
});
});
</script>
<body>
<div id="div1">
<h2>Display Image</h2>
</div>
<button data-id="1">Dunblane </button>
<button data-id="2">Main Campus </button>
<button data-id="3">Law School </button>
<button data-id="4">New Mexico Ave </button>
<button data-id="5">Soccer Field </button>
<button data-id="6">Capital Hall </button>
<img id="theImage" class="hide">
<div id="theDescription" class="hide">
</html>
</body>
推荐答案
描述了。有更好的方法做到这一点（我宁愿有一个结构体数组，一个查询，而不是两个），但这可能是最简单的实现基于您当前的代码，而不重写所有。
So just extend what you've already got to include the descriptions too. There are better ways to do this (I'd rather have one array of structs, and one query instead of two), but this is probably the simplest to implement based on your current code without rewriting it all.
还要注意，我不使用< cfloop query ..> 我使用了< cfoutput query ...> ，这会节省您随后在循环中使用cfoutput包装我们的所有内容。
Also note that instead of using <cfloop query..> I've used <cfoutput query...> which saves you then having to wrap all our content with cfoutput inside the loop.
var descs= {
<cfoutput query="qtest2">
"#qtest2.Image_ID#": "#qtest2.Remarks#",
</cfoutput>
};
var src = images[id];
var desc = descs[id];
$("#theImage").attr("src", src).removeClass("hide");
$("#theDescription").html(desc).removeClass("hide");
<img id="theImage" class="hide">
<div id="theDescription" class="hide"></div>
更新答案：
使用一个查询同时获取所有图像和备注。它使你的javascript有点更复杂，这不是理想的，但这种方法应该工作。 （你的javascript数组和结构中的最后一个项目的尾部逗号将在IE中抛出一个错误，但我把它作为一个练习，自己解决如何使用计数器来确定是否需要添加逗号）。
Updated answer: I'd use one query to get all the images and remarks at the same time. It makes your javascript a bit more complicated, and this isn't ideal, but this approach should work. (the trailing commas on the last items in your javascript arrays and structures will throw an error in IE, but I leave it as an exercise for yourself to work out how you can use a counter to determine if you need to add a comma or not).
然后我们可以使用分组输出，所以我们得到所有的备注。我把它们作为一个数组，但它也可以只是一个字符串。
Then we can use grouped output, so we get all the remarks. I've put them here as an array, but it could just be a string as well.
<cfquery datasource="AccessTest" name="qTest">
SELECT P.Account, P.Image, P.Image_ID, C.Remarks
FROM PictureDB AS P
INNER JOIN CommentsDB AS C
ON C.Image_ID = P.Image_ID
ORDER BY P.Image_ID
</cfquery>
var images = {
<cfoutput query="qTest" group="Image_ID">
"#qTest.Image_ID#": {
"image": "#qTest.Image#",
"remarks": [
<cfoutput>
"#qTest.Remarks#",
</cfoutput>
]
},
</cfoutput>
};
$("button").click(function(event){
event.preventDefault();
var id = $(this).data("id");
var src = images[id].image;
var desc = images[id].remarks.toString();
$("#theImage").attr("src", src).removeClass("hide");
$("#theDescription").html(desc).removeClass("hide");
});
这篇关于使用Javascript和ColdFusion链接注释和注释的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
