Question

使用ColdFusion，Access和Javascript，我已经能够设置一个程序，当您触摸按钮时，它会为您提供照片。然后我使用JOIN方法链接数据库中的两个工作表。现在我要做的是将JOIN工作到程序中，这样当我单击一个Image时，它会显示通过Image_id与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>

enter image description here

我做出更改后的新代码。

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

Answer 1

所以只需扩展您已经包含的描述。有更好的方法来做到这一点（我宁愿有一个结构数组，一个查询而不是两个），但这可能是最简单的基于你当前的代码实现而不重写它。

另请注意，我没有使用<cfloop query..>，而是使用了<cfoutput query...>，这样可以节省您的时间，然后在循环中使用cfoutput包装所有内容。

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中引发错误，但我将其作为练习让自己弄清楚如何使用计数器来确定是否需要添加逗号）。

然后我们可以使用分组输出，所以我们得到所有的评论。我把它们放在这里作为一个数组，但它也可以只是一个字符串。

<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链接备注和注释

1 个答案: