Javascript 如何获取动态创建的ID？

我是一个使用javascript和ajax的绝对初学者，这就是为什么我现在陷入困境的原因。我有一个while循环，其中有两个不同的按钮。正如我想象的，这两种方法都有效，除了一件小事

产品id

始终仅为第一个元素传递，或者，如果我为最后一个元素更改了它。 如何将正确的产品ID传递给脚本

这是我的PHP文件：

<?php while ( $product = $browse->fetch( PDO::FETCH_ASSOC ) ) :
    $postid = $product[ 'id' ];
    $userid = 1; ?>

 <div id="content_<?php echo $postid ?>">
 <div id="reload_<?php echo $postid ?>" class="row postfarbe browse">

  <form method='post' action="" onsubmit="return add();">
    <input type="hidden" id="userid" value="<?php echo $userid ?>" class="input-box">
    <input type="hidden" id="productid" value="<?php echo $postid ?>" class="input-box">
    <input type="hidden" id="collection" value="1" class="input-box">
    <input type="hidden" id="wish" value="0" class="input-box">
    <input type="submit" id="submit" value="Add to Collection" class="btn my-2 my-sm-0 btn-outline-dark btn-sm">
  </form>

 </div>
</div>
<?php endwhile; ?>

function add()
{
    var userid = document.getElementById("userid").value;
    var productid = document.getElementById("productid").value;
    var collection = document.getElementById("collection").value;
    var wishlist = document.getElementById("wish").value;
    if(userid && productid && collection && wishlist) {
        $.ajax
        ({
            type: 'post',
            url: 'post_collection.php',
            data: {
                user_id:userid,
                product_id:productid,
                collection_id:collection,
                wishlist_id:wishlist
            },
            success: function (response) {
                $("#content_"+ productid).load(" #reload_" + productid);
            }
        });
    }  
    return false;
}
</script>

我的Javascript是：

<?php while ( $product = $browse->fetch( PDO::FETCH_ASSOC ) ) :
    $postid = $product[ 'id' ];
    $userid = 1; ?>

 <div id="content_<?php echo $postid ?>">
 <div id="reload_<?php echo $postid ?>" class="row postfarbe browse">

  <form method='post' action="" onsubmit="return add();">
    <input type="hidden" id="userid" value="<?php echo $userid ?>" class="input-box">
    <input type="hidden" id="productid" value="<?php echo $postid ?>" class="input-box">
    <input type="hidden" id="collection" value="1" class="input-box">
    <input type="hidden" id="wish" value="0" class="input-box">
    <input type="submit" id="submit" value="Add to Collection" class="btn my-2 my-sm-0 btn-outline-dark btn-sm">
  </form>

 </div>
</div>
<?php endwhile; ?>

function add()
{
    var userid = document.getElementById("userid").value;
    var productid = document.getElementById("productid").value;
    var collection = document.getElementById("collection").value;
    var wishlist = document.getElementById("wish").value;
    if(userid && productid && collection && wishlist) {
        $.ajax
        ({
            type: 'post',
            url: 'post_collection.php',
            data: {
                user_id:userid,
                product_id:productid,
                collection_id:collection,
                wishlist_id:wishlist
            },
            success: function (response) {
                $("#content_"+ productid).load(" #reload_" + productid);
            }
        });
    }  
    return false;
}
</script>

函数添加（）
{
var userid=document.getElementById（“userid”）.value；
var productid=document.getElementById（“productid”）.value；
var collection=document.getElementById（“collection”）.value；
var wishlist=document.getElementById（“wish”）.value；
if（userid&&productid&&collection&&wishlist）{
$.ajax
({
键入：“post”，
url:'post_collection.php'，
数据：{
用户id:userid，
产品标识：产品标识，
集合\u id：集合，
愿望列表\u id:愿望列表
},
成功：功能（响应）{
$（“#内容"+productid）.load（“#重新加载"+productid”）；
}
});
}  
返回false；
}

---

我知道我的示例中的产品id始终是相同的，但是如果循环中有10个或更多条目，我如何将正确的id传递给脚本？

您的问题是

id

是唯一的，只能分配给元素一次，如下所示：

<p id="paragraph"> This is legal </p>
<p id="paragraph"> This is illegal - It is no longer unique </p>

<p class="paragraph"> This is legal </p>
<p class="paragraph"> This is legal </p>

看看这个在用

---

您的解决方案需要将方法添加到

按钮

。然后得到表单。然后，您可以创建该类并从表单数据中获取

您的表单也提交了操作。您需要有一个

按钮类型的

，这样它就不会提交操作。这也必须是一个类，因为如果要成倍地创建它们，它将不是唯一的

这里有一个工作示例，可以重新添加AJAX请求。

$（文档）.ready（函数（）{
$（'.submit btn'）。单击（函数（）{
变量元素={
'userid'：$（this.parent（）.find（'.userid'）.val（），
'productid'：$（this.parent（）.find（'.productid'）.val（），
'集合'：$（this.parent（）.find（'.collection'）.val（），
'wish'：$（this.parent（）.find（'.wish'）.val（）
};
log（“用户ID:+elements.userid”）；
log（“产品ID:+elements.productid”）；
log（“Collection:+elements.Collection”）；
console.log（“Wish:+elements.Wish”）；
//TODO：使用以下元素添加AJAX请求
});
});
按钮{
背景：#0084ff；
边界：无；
边界半径：5px；
填充：8px 14px；
字体大小：15px；
颜色：#fff；
光标：指针；
}

添加到集合


添加到集合
我阅读了您的代码，您希望有多个条目，并希望在公共JS函数Add中读取/获取动态生成的表单的feild，该函数当前引用呈现HTML中的第一个找到的元素-这就是您每次都获得相同值的原因

您需要在ADD函数的参数中通过少量的唯一性来改变逻辑

<form method='post' action="" onsubmit="return add(<?php echo $postid; ?> );">
<input type="hidden" id="<?php echo $postid; ?>_userid" value="<?php echo $userid ?>" class="input-box">
<input type="hidden" id="<?php echo $postid; ?>_productid" value="<?php echo $postid ?>" class="input-box">
<input type="hidden" id="<?php echo $postid; ?>_collection" value="1" class="input-box">
<input type="hidden" id="<?php echo $postid; ?>_wish" value="0" class="input-box">
<input type="submit" id="<?php echo $postid; ?>_submit" value="Add to Collection" class="btn my-2 my-sm-0 btn-outline-dark btn-sm">

希望这能让您理解我是如何在循环中生成唯一的元素ID，并在函数中传递相同的ID作为参数，以便在JS中获取它们。
ID必须是唯一的。现在有几个id为“productid”的元素。您可以将计数器添加到id（“productid2”）中，并将其添加到函数调用中；其中“2”将是计数器/索引。更好的方法是在
表单上设置eventhandler。提交
，然后使用传入的元素（表单）获取子元素及其值。非常感谢！我想我还有很多东西要学。整个例子现在帮助我更好地理解它。我试图给出唯一的ID，但是循环中的最后一个条目总是被使用。不用担心。记住最简单的方法是，如果有多个元素：使用类。如果只有一个元素：使用id。我将在图5的问题底部添加您需要的PHP代码。我更新了答案以提供您的PHP代码@StefanKleinOh，那不是必要的。我能很好地综合你的建议。非常感谢@Jaquarh，现在一切正常。太棒了。很高兴能帮上忙。这和我第一次尝试的结果很相似，但我失败了。多亏了@Jaquarh，问题已经解决了。但是谢谢你的努力！