Question

我试图设置单击“添加”按钮时增加或减少的值。递增或递减的数字在H2标签上

这是我到目前为止尝试过的。

$(document).ready(function() {
  var maxField = 100;
  var addButton = $('.btn_add_option');
  var wrapper = $('.wrap_add_input div.wrap_input');
  var fieldHTML = '<div><h2>title2</h2><input type="text" id="" name="" style="width:135px;"><button type="button" class="btn_rmv_option">remove</button></div>';

  var x = 1;
  var counter = $(this).index();
  $(addButton).click(function() {

    if (x < maxField) {
      x++;
      $(wrapper).append(fieldHTML);
    }
  });
  $(wrapper).on('click', '.btn_rmv_option', function(e) {
    e.preventDefault();
    $(this).parent('div').remove();
    x--;
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrap_add_input">

  <button type="button" class="btn_add_option mar">add</button>

  <div class="wrap_input">
    <div>
      <h2>title1</h2>
      <input type="text" id="" name="" style="width:135px;">
    </div>
  </div>

我需要修复什么代码？请帮忙。

Answer 1

您要像这样继续添加标题吗？

$(document).ready(function() {
  var maxField = 100;
  var addButton = $('.btn_add_option');
  var wrapper = $('.wrap_add_input div.wrap_input');
  var fieldHTML = '';

  var x = 1;
  var counter = $(this).index();
  $(addButton).click(function() {

    if (x < maxField) {
      x++;
      var fieldHTML = '<div><h2>title'+x+'</h2><input type="text" id="" name="" style="width:135px;"><button type="button" class="btn_rmv_option">remove</button></div>';
      $(wrapper).append(fieldHTML);
    }
  });
  $(wrapper).on('click', '.btn_rmv_option', function(e) {
    e.preventDefault();
    $(this).parent('div').remove();
    x--;
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrap_add_input">

  <button type="button" class="btn_add_option mar">add</button>

  <div class="wrap_input">
    <div>
      <h2>title1</h2>
      <input type="text" id="" name="" style="width:135px;">
    </div>
  </div>

Answer 2

尝试此代码：

$(document).ready(function() {
var maxField = 100;
var addButton = $('.btn_add_option');
var wrapper = $('.wrap_add_input div.wrap_input');

var x = 1;
var counter = $(this).index();
$(addButton).click(function() {

  if (x < maxField) {
     x++;
    $(wrapper).append(setContent(x));
  }
 });
$(wrapper).on('click', '.btn_rmv_option', function(e) {
   e.preventDefault();
   $(this).parent('div').remove();
   x--;
 });
});

 function setContent(x){
       return '<div><h2>title'+x+'</h2><input type="text" id="" name="" style="width:135px;"><button type="button" class="btn_rmv_option">remove</button></div>';
   }

只需创建具有索引值的动态内容。希望这会有所帮助。

在jQuery中单击按钮时添加元素并增加索引值

2 个答案: