代码之家 › 专栏 › 技术社区 › XxnumbxX

克隆多个输入Javascript

jquery javascript

XxnumbxX · 技术社区 · 7 年前

有人能帮我用一下这个JavaScript吗?我试图克隆多个不同的输入。单击附加按钮时要独立克隆的付款入/出。我要克隆的房子收费选择和输入。我能够得到标准输入,以我想要的方式克隆,但也希望用它来克隆选择框。我还可以让附加的按钮正确排列。我的JavaScript很差,所以我甚至不确定我是不是应该这样做。感谢任何帮助。

$(function() {
  $(document).on('click', '.btn-add', function(e) {
    e.preventDefault();

    var controlForm = $('.controls stuff:first'),
      currentEntry = $(this).parents('.entry:first'),
      newEntry = $(currentEntry.clone()).appendTo(controlForm);

    newEntry.find('input').val('');
    controlForm.find('.entry:not(:last) .btn-add')
      .removeClass('btn-add').addClass('btn-remove')
      .removeClass('btn-success').addClass('btn-danger')
      .html('<span class="glyphicon glyphicon-minus"></span>');
  }).on('click', '.btn-remove', function(e) {
    $(this).parents('.entry:first').remove();

    e.preventDefault();
    return false;
  });
});

.entry:not(:first-of-type) {
  margin-top: 10px;
}

.glyphicon {
  font-size: 12px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="col-md-8 col-md-offset-2">
    <legend>Payouts/Payins - Richfield</legend>

    <!-- Pay Out input-->
    <div class="form-group line">
      <label class="col-md-3 control-label" for="pay_out">Payment Out</label>
      <div class="col-md-4">
        <div class="entry input-group">
          <input id="pay_out" name="pay_out[]" class="form-control" placeholder="Total $" type="text">
          <span class="input-group-btn">&lt;
        <button class="btn btn-success btn-add" type="button">
            <span class="glyphicon glyphicon-plus"></span>
          </button>
          </span>
        </div>
      </div>
    </div>

    <!-- press + div -->
    <div class="row">
      <div class="col-md-6 col-md-offset-3">
        <small>
            Press
             <span class="glyphicon glyphicon-plus gs"></span>
               to add another form field :)
             </small>
      </div>
    </div>
    <br>

    <!-- Pay In input-->
    <div class="form-group line">
      <label class="col-md-3 control-label" for="pay_in">Payment In</label>
      <div class="col-md-4">
        <div class="entry input-group">
          <input id="pay_in" name="pay_in[]" class="form-control" placeholder="Total $" type="text">
          <span class="input-group-btn">&lt;
        <button class="btn btn-success btn-add" type="button">
            <span class="glyphicon glyphicon-plus"></span>
          </button>
          </span>
        </div>
      </div>
    </div>

    <!-- press + div -->
    <div class="row">
      <div class="col-md-6 col-md-offset-3">
        <small>
            Press
             <span class="glyphicon glyphicon-plus gs"></span>
               to add another form field :)
             </small>
      </div>
    </div>


    <br>
    <legend>House Charges - Richfield</legend>


    <!-- Dynamic House charges Divider-->
    <div class="col-md-3 col-md-offset-2 colspace">
      <div class="form-group">
        <select class="form-control" id="account_selector" name="house_account[]">
          <option>Select House Acct</option>
          <option>2</option>
          <option>3</option>
          <option>4</option>
          <option>5</option>
        </select>
      </div>

    </div>
    <div class="col-md-3 colspace">
      <div class="form-group">
        <div class="controls">
          <stuff>
            <div class="entry input-group">
              <input id="house_total" name="house_total[]" class="form-control" placeholder="Total $" type="text">
              <span class="input-group-btn">
                          <button class="btn btn-success btn-add" type="button">
                              <span class="glyphicon glyphicon-plus"></span>
              </button>
              </span>
            </div>

          </stuff>
        </div>
      </div>

    </div>
  </div>
</div>


<div id="push"></div>

( Bootply )

0 回复 | 直到 7 年前

XxnumbxX 7 年前

$(function(){
        $(document).on('click', '.btn-add', function(e) {
            e.preventDefault();
            var parentRow = $(this).closest('.charge-row'),
                cloneRow = cloneChargeRow(parentRow);

            $('.charge-row:last').after(cloneRow);

        }).on('click', '.btn-remove', function(e) {
            $(this).closest('.charge-row').remove();

            e.preventDefault();
            return false;
        });

        function cloneChargeRow(parentRow) {
          // Clear existing add button
          $('.charge-row').find('.btn-add').removeClass('btn-add btn-success').addClass('btn-remove btn-danger');
          $('.charge-row').find('.btn').html('<span class="glyphicon glyphicon-minus"></span>')


          var newRow = parentRow.clone();

          newRow.find('.btn').addClass('btn-add btn-success').removeClass('btn-remove btn-danger');
          newRow.find('.btn').html('<span class="glyphicon glyphicon-plus"></span>');
          newRow.find('select :selected').removeAttr('selected');
          newRow.find('input').val('');

          return newRow;
        }
    });

        <div class="container">
      <div class="col-md-10">

    <legend>House Charges - Richfield</legend>
        <div class="charge-row row">
          <!-- Dynamic House charges Divider-->
          <div class="col-md-3 col-md-offset-2 colspace">
            <div class="form-group">
              <select class="form-control" id="account_selector" name="house_account[]">
                <option>Select House Acct</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
                <option>5</option>
              </select>
            </div>                        
          </div>

          <div class="col-md-3 colspace">
            <div class="form-group">
              <div class="controls">
                <div class="entry input-group">
                  <input id="house_total" name="house_total[]" class="form-control" placeholder="Total $" type="text">
                  <span class="input-group-btn">
                    <button class="btn btn-success btn-add" type="button">
                      <span class="glyphicon glyphicon-plus"></span>
                    </button>
                  </span>
                </div>
              </div>
            </div>            
          </div>
        </div>
      </div>
    </div>

Bootply Here