javascript - 对同一页面上的多个 html 表单重用 JavaScript 脚本

Question

我的页面有多个表单，我需要在其上使用相同的 JavaScript 代码。 JavaScript 代码向表单添加更多输入字段。该脚本工作正常，但向所有表单添加了输入字段。我需要它仅将字段添加到当前填写的表单中。到目前为止我还没有运气。

以下是其中一种表单的样子:

<form>
<div class="price-group">
  <div class="price-fields">
  <label>Multiple <a class="add-field" href="#"> Add Field</a></label>
    <br><input  maxlength="7" type="text" name="prices[]" />
  </div><!--end form-group price-fields-->
</div><!--end price-group-->
</form>

这是我的 JavaScript:

$(document).ready(function($){
     $('.price-group .add-field').click(function(e){
          e.preventDefault();
          var n = $('.price-fields').length;
          $('.price-group').append('<div class=" price-fields"><input  maxlength="7" type="text" name="prices[]"  /><a class="remove-field pull-right" href="#">Remove</a></div><!--end form-group-->');
     });
     $('.price-group').on('click', '.remove-field', function(){
          $(this).parent().fadeOut("slow", function() {
              $(this).remove();
          });
          return false;
     });
});

我设置了jsfiddle: JsFiddle Link

Answer 1

您可以使用jQuery closest找到最近的.price-fields到点击的<a>标签:

$(document).ready(function($){
     $('.price-group .add-field').click(function(e){
          e.preventDefault();
          var n = $('.price-fields').length;
          $(this).closest('.price-group').append('<div class=" price-fields"><input  maxlength="7" type="text" name="prices[]"  /><a class="remove-field pull-right" href="#">Remove</a></div><!--end form-group-->');
     });
     $('.price-group').on('click', '.remove-field', function(){
          $(this).parent().fadeOut("slow", function() {
              $(this).remove();
          });
          return false;
     });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<div class="price-group">
  <div class="price-fields">
  <label>Multiple <a class="add-field" href="#"> Add Field</a></label>
    <br><input  maxlength="7" type="text" name="prices[]" />
  </div><!--end form-group price-fields-->
</div><!--end price-group-->
</form>

<form>
<div class="price-group">
  <div class="price-fields">
  <label>Multiple <a class="add-field" href="#"> Add Field</a></label>
    <br><input  maxlength="7" type="text" name="prices[]" />
  </div><!--end form-group price-fields-->
</div><!--end price-group-->
</form>

<form>
<div class="price-group">
  <div class="price-fields">
  <label>Multiple <a class="add-field" href="#"> Add Field</a></label>
    <br><input  maxlength="7" type="text" name="prices[]" />
  </div><!--end form-group price-fields-->
</div><!--end price-group-->
</form>

Working fiddle