getElementByID 用于动态生成的 ID 元素

Question

我在获取项目的 ID 元素的值时遇到问题，该元素是根据从数据库获得的数据动态生成的。我有一个查询 SELECT ItemID, ItemName, ItemImageName FROM Items。我有以下代码，通过将 ItemID 的值连接到每个 ID 名称，为从数据库中编辑的所有行 return 的每个 <div> 生成 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 的项目，这应该 return 与此类似的结果：

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

然后我希望能够单击带有 ID=Image002 的图像，并且我希望使用 getElementById("ItemID").innerHTML 获得 ItemID 的值。我有以下代码：

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

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

这 returns itemID 未定义。任何帮助将不胜感激！

Answer 1

getElementById("ItemID").innerHTMLreturnsundefined，因为是未定义的。正确的 ID 是 ItemID002。你需要能够分辨出它是什么。

首先，将您的 PHP 更改为这样创建 HTML。

<div id="ItemID002" onclick="clicked(002)" />

然后，转到您的 Javascript 并创建此函数。

function clicked(id){
    var itemID= document.getElementById("ItemID"+id).innerHTML;
    console.log(itemID);
}

最后，您 PHP 创建了 <div id="ItemID"002>，您需要通过将其从 <div id= "ItemID" .$ItemID> $ItemID 更改为 <div id='ItemID.$itemId'>

来解决这个问题

编辑： 此外，我想指出，在您的示例中的某些地方，您在 [=31] 中指定属性值时忘记使用引号=].我建议你解决这个问题。

祝你好运！

Answer 2

或者，您也可以仅通过 javascript 来实现。所以您不需要更改标记或 PHP。这是一个示例 fiddle https://jsfiddle.net/L3bwfyve/

关键部分是提取点击元素的部分id：

var itemIdPart = e.target.id.substr(5);

务必检查 e.target id 等中的空值...

就我个人而言，我会认为这个解决方案有点老套......但你要求 javascrit，你明白了 ;-)

Answer 3

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

getElementByID 用于动态生成的 ID 元素

getElementByID for Dynamically generated ID Elements

javascript

innerhtml

getelementbyid