jquery - 如何通过获取 div 父类而不是输入来触发

Question

这是我的表单和脚本，其中数据是从输入名称触发的。我想触发这个函数，其中 div 类有 kg 而不是输入名称

我该怎么做？

$(document).on('change paste keyup', "input[name='kg[]']", function() {
  updatedynamicprice($(this));
});

function updatedynamicprice(selector) {
  let kg = $("input[name='kg[]']").val();
  let total_price = 100 * kg;
  $("input[name='price[]']").val(total_price);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="kg">
  <input type="number" name="kg[]" id="input-kg" class="form-control">
</div>
<div class="form-controller">
  <input type="number" name="price[]" id="input-kg" class="form-control">
</div>

标签： jquery

Answer 1

使用最近的和容器导航

提供可以重复使用的课程

$(document).on('change paste keyup', function(e) {
  const $parent = $(e.target).closest(".container");
  let qty = $(".qty",$parent).val();
  let total_price = 100 * qty;
  $(".price",$parent).val(total_price);
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="kg">
    <input type="number" name="kg[]" class="qty" class="form-control">
  </div>
  <div class="form-controller">
    <input type="number" name="price[]" class="price" class="form-control">
  </div>
</div>
<hr/>
<div class="container">
  <div class="pounds">
    <input type="number" name="pounds[]" class="qty" class="form-control">
  </div>
  <div class="form-controller">
    <input type="number" name="price[]" class="price" class="form-control">
  </div>
</div>