getElementByID 用于动态生成的 ID 元素答案

【问题标题】：getElementByID for Dynamically generated ID ElementsgetElementByID 用于动态生成的 ID 元素
【发布时间】：2017-09-23 19:43:39
【问题描述】：

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

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

然而，这会将itemID 作为未定义返回。任何帮助将不胜感激！

【问题讨论】：

第一个代码示例是 php 吗？语法看起来很离谱。 <div id= "ItemID" .$ItemID> 对我来说没有意义，为什么 .$itemID 以句点为前缀？该循环正在输出具有相同 id 的几个元素。一次在 DOM 中应该只有一个给定的 id。
@admcfajn 那是 PHP 代码，PHP 中的 append 运算符是句点，该代码应该创建类似 <div id="ItemID"002 的东西，OP 应该修复它以创建 div id="ItemID002"
谢谢@Ben，我确实知道......我只是不认为它是有效的，因为连接运算符（我认为前置运算符将是 .= ）正在从外观上看，在 PHP 之外使用，这就是为什么我很困惑......没有打开或关闭 php 标签或 echo/print 语句

标签： javascript innerhtml getelementbyid

【解决方案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>

【讨论】：

【解决方案2】：

getElementById("ItemID").innerHTML 返回未定义，因为它是未定义的。正确的 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'> 来解决这个问题

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

祝你好运！

【讨论】：

【解决方案3】：

或者，您也可以仅通过 javascript 来实现。因此，您无需更改标记或 PHP。这是一个示例小提琴https://jsfiddle.net/L3bwfyve/

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

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

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

我个人认为这个解决方案有点 hacky...但是你要求 javascrit，你明白了 ;-)

【讨论】：