在jquery中获取当前单击的项目值

Question

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

我通过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 %}

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>

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

提前致谢

Answer 1

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id

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

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

我要做的是完全摆脱ID，并将每个元素包装在某种容器中。单击提交时，找到.closest容器，并将其用作jQuery context以查找具有您关注的名称的输入。

$('.submit').on('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(vendor)
    console.log(productname)
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
{% for i in item %}
<div class="item">
   <div class="form-group">
       <label for="email">Product Id:</label>
       <input type="text" class="form-control" name="productID" value={{i.productID}}>
   </div>
   <div class="form-group">
       <label for="email">Product Id:</label>
       <input type="text" class="form-control" name="productName" value={{i.productName}}>
   </div>

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

Answer 2

主要问题是因为你在DOM中多次重复相同的id。那是无效的HTML。要使用常见行为对元素进行分组，请使用类。

然后你可以使用点击的button中的DOM遍历找到相关的input元素，并使用closest()和find()的组合读取它们的值。试试这个：

$('.submit').click(function() {
  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(vendor)
  console.log(productname)
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="container">
  <div class="form-group">
    <label for="email">Product Id:</label>
    <input type="text" class="form-control productID" name="productID" value="{{i.productID_1}}">
  </div>
  <div class="form-group">
    <label for="email">Product Id:</label>
    <input type="text" class="form-control productName" name="productName" value="{{i.productName_1}}">
  </div>
  <div class="form-group">
    <label for="email">Product Id:</label>
    <input type="text" class="form-control vendor" name="vendor" value="{{i.vendor_1}}">
  </div>
  <button type="submit" class="btn btn-default submit">Submit</button>
</div>

<div class="container">
  <div class="form-group">
    <label for="email">Product Id:</label>
    <input type="text" class="form-control productID" name="productID" value="{{i.productID_2}}">
  </div>
  <div class="form-group">
    <label for="email">Product Id:</label>
    <input type="text" class="form-control productName" name="productName" value="{{i.productName_2}}">
  </div>
  <div class="form-group">
    <label for="email">Product Id:</label>
    <input type="text" class="form-control vendor" name="vendor" value="{{i.vendor_2}}">
  </div>
  <button type="submit" class="btn btn-default submit">Submit</button>
</div>

请注意，这会在循环中添加一个额外的包装div元素，以便更容易检索相关元素。