javascript - 动态生成的 ID 元素的 getElementByID

Question

我在获取 ID 的值时遇到问题从数据库中获取的数据动态生成的项目元素。我有一个问题 SELECT ItemID, ItemName, ItemImageName FROM Items .比我有以下代码将生成 ID对于每个 <div>对于通过连接 ItemID 的值从数据库返回的所有行每个 ID 名称。

for ($i=0; $i <$numrows; $i++) {
$stmt->fetch()

<div> <img class="itemImage" id="Image" .$ItemID src=/images/itemImage . $itemID> $ItemID </div>
<div id= "ItemID" .$ItemID> $ItemID </div>
<div id= "ItemName" .$ItemID> $ItemName" </div>

}

对于带有 ItemID=002 的项目，这应该会返回与此类似的结果:

<div> <img class="itemImage" id=Image002 src=/images/Image002 > </div>
<div id= ItemID002> 002 </div>
<div id= ItemName002> SomeNameOfItem002" </div>

然后我希望能够单击带有 ID=Image002 的图像我想得到 ItemID 的值与 getElementById("ItemID").innerHTML .我有以下代码:

var itemID = document.getElementById("ItemID").innerHTML;

$( ".itemImage" ).click(function() {
var itemID= document.getElementById("ItemID").innerHTML;
console.log(itemID);

但是这会返回 itemID作为未定义的。任何帮助将不胜感激!

Answer 1

        <div> <img class="itemImage" id=Image001 src="/images/Image001"> </div>
        <div id=ItemID001> 001 </div>
        <div id=ItemName001> SomeNameOfItem001" </div>

        <div> <img class="itemImage" id=Image002 src="/images/Image002"> </div>
        <div id=ItemID002> 002 </div>
        <div id=ItemName002> SomeNameOfItem002" </div>

        <div> <img class="itemImage" id=Image003 src="/images/Image003"> </div>
        <div id=ItemID003> 003 </div>
        <div id=ItemName003> SomeNameOfItem003"> </div>

        <script>
            $(document).ready(function () {
                $(".itemImage").click(function () {
                    var imgID = $(this).prop('id').replace("Image", "");
                    // you can directly use value imgID variable if its same. or you 
                    //can use from ItemID inner html
                    var yourValue = $("#ItemID" + imgID).html();
                    alert(yourValue);
                })
            });

        </script>