Javascript 获取jquery中当前单击的项值

我正在使用django在模板上显示项及其属性列表。 项具有saveral属性- 名称、价格、供应商等

我通过for循环显示这些项目。我正在尝试为此编辑项目详细信息，我需要将新/旧值发送到jquery函数

我的代码看起来像-

{% for i in item %}
   <div class="form-group">
       <label for="email">Product Id:</label>
       <input type="text" class="form-control" name="productID" id="productID" value={{i.productID}}>
   </div>
   <div class="form-group">
       <label for="email">Product Id:</label>
       <input type="text" class="form-control" name="productName" id="productName" value={{i.productName}}>
   </div>

   <div class="form-group">
       <label for="email">Product Id:</label>
       <input type="text" class="form-control" name="vendor" id="vendor" value={{i.vendor}}>
   </div>
        <button type="submit" id="submit" class="btn btn-default">Submit</button>
{% endfor %}

{item%]中的i的%
产品标识：
产品标识：
产品标识：
提交
{%endfor%}

jquery-

<script type="text/javascript">
    $('#submit').click(function () {
        var productid = $("#productID").val();
        var vendor = $("#vendor").val();
        var productname = $('#productName').val();
        console.log(productid)
        console.log(vendor)
        console.log(productname)
    });
</script>

$（“#提交”）。单击（函数（）{
var productid=$（“#productid”）.val（）；
var vendor=$（“#vendor”）.val（）；
var productname=$（“#productname”）.val（）；
console.log（productid）
console.log（供应商）
console.log（productname）
});

但这对我不起作用。 请帮忙

提前感谢

id全局属性定义一个唯一标识符（id），该标识符在整个文档中必须是唯一的。它的目的是在链接（使用片段标识符）、编写脚本或设置样式（使用CSS）时标识元素

不能有多个具有相同ID的元素，否则将无法按预期工作

我要做的是完全去掉ID，将每个元素包装在某种容器中。单击submit时，找到最接近的容器，并将其用作jQuery，以查找您关心的名称为的输入

$（'.submit'）。在（'click'，function（）上{
var$item=$（this）.closest（'.item'）；
var productid=$（“[name='productid']”，$item）.val（）；
var vendor=$（“[name='vendor']”，$item）.val（）；
var productname=$（“[name='productname']”，$item）.val（）；
console.log（productid）
console.log（供应商）
console.log（productname）
});

{项目%中的i为%1}
产品标识：
产品标识：
产品标识：
提交
{%endfor%}
主要问题是，您在DOM中多次重复相同的
id
。这是无效的HTML。要将具有常见行为的元素分组，请改用类

然后，您可以从单击的
按钮中使用DOM遍历来查找相关的
输入
元素，并使用
最近的（）和
查找（）的组合来读取它们的值。试试这个：


$（'.submit'）。单击（函数（）{
var$container=$（this）.closest（'.container'）；
var productid=$container.find（“.productid”）.val（）；
var vendor=$container.find（“.vendor”）.val（）；
var productname=$container.find（'.productname'）.val（）；
console.log（productid）
console.log（供应商）
console.log（productname）
});

产品标识：
产品标识：
产品标识：
提交
产品标识：
产品标识：
产品标识：
提交
但在我的例子中，我没有相同的id。每个元素的id都不同。它们不是：
id=“productID”value={{i.productID}}
-它们有不同的值，但id始终是“productID”，例如，像productId这样的id-需要在每次循环迭代中与i结合以生成唯一的idi。我不知道如何为每个项目添加不同的产品id，您能否帮助mei通过-id=“productId{{i.id}”尝试放置不同的id，但是它也不起作用，仍然只获取第一个元素的值。在这种情况下，请在问题中编辑一个问题的工作示例，正如您从上面使用类的示例中看到的，这很好。