Question

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

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

getElementById("ItemID").innerHTML返回undefined，因为它未定义。正确的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中指定属性的值时忘记使用引号。我建议你解决这个问题。

祝你好运！

Answer 2

或者你可以通过javascript实现这一点。所以你不需要改变标记或PHP。这是一个示例小提琴https://jsfiddle.net/L3bwfyve/

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

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

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

就我个人而言，我会认为这个解决方案有点hacky ......但是你要求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>

动态生成的ID元素的getElementByID

3 个答案: