Fatal编程技术网
  • javascript/
  • 使用Javascript和ColdFusion链接备注和注释

使用Javascript和ColdFusion链接备注和注释

javascript ms-access coldfusion

使用Javascript和ColdFusion链接备注和注释,javascript,ms-access,coldfusion,Javascript,Ms Access,Coldfusion,使用ColdFusion、Access和Javascript，我已经能够设置一个程序，当你按下一个按钮时，它会给你一张照片。然后我使用JOIN方法链接数据库中的两个工作表。现在我要做的是加入到程序中，这样当我点击一个图像时，它会通过图像id显示与该图像相关的备注。有人能帮我显示与每个图像相关的备注吗 <!DOCTYPE html> <html> <cfquery datasource="AccessTest" name="qTest">

使用ColdFusion、Access和Javascript，我已经能够设置一个程序，当你按下一个按钮时，它会给你一张照片。然后我使用JOIN方法链接数据库中的两个工作表。现在我要做的是加入到程序中，这样当我点击一个图像时，它会通过图像id显示与该图像相关的备注。有人能帮我显示与每个图像相关的备注吗

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

在我做了更改之后，我有了新的代码

     <!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>
查看源代码

因此，只需扩展已经包含的内容，也包括描述。有更好的方法可以做到这一点，我宁愿使用一个结构数组和一个查询，而不是两个，但这可能是基于当前代码实现的最简单的方法，而无需全部重写

还要注意的是，我没有使用我使用过的，这样你就不用在循环中用cfoutput包装我们的所有内容了

 <!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>
最新答复： 我将使用一个查询同时获取所有图像和备注。这会使javascript更加复杂，这并不理想，但这种方法应该可以工作。javascript数组和结构中最后一项上的尾随逗号将在IE中引发错误，但我将其作为一个练习留给您自己，以确定如何使用计数器来确定是否需要添加逗号

然后我们可以使用分组输出，这样我们就可以得到所有的注释。我把它们放在这里作为数组，但也可以是字符串

还有一个问题。你知道为什么只有第一个链接到图片的注释会出现吗？你能给我们看一下生成的javascript吗，即你页面上的查看源代码，而不是CFML代码吗？我做了一个测试并做了注释。B在第一个按钮下测试，Dunblane。这就出现了。然后当我添加了一个测试。它取代了B试验。它似乎只显示按字母顺序排列的第一个。啊，所以你对ID为1的图像有两个注释。。。在这种情况下，你想做什么；请注意，与其构建自己的JSON字符串，不如使用序列化JSON。它有一些怪癖，但在这种情况下应该没问题。 
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>

<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");
});