Question

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

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

我的代码看起来像-

OwnBrowserRouter

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 %}

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

预先感谢

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元素，以便更轻松地检索相关元素。

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

2 个答案: