Question

我卡在增加序列号没有自动，当我点击添加按钮，它是添加新字段，但序列号应该增加你们可以帮助我...

<div class="input-group">
    <input type="text" name="sno[]" class="form-control" placeholder="S. No." value="1"/>
</div>
<span class='toggler date'>
    <a class="btn btn-condensed btn-sm">
        <div style="font-size:16px"> 
            <i class="fa fa-plus-square"></i>
        </div>
    </a>
</span>
<span class='toggler date' style='display:none;'>
    <a class="btn btn-condensed btn-sm">
        <div style="font-size:16px"> 
            <i class="fa fa-plus-square"></i>
        </div>
    </a>
</span>

当我点击添加按钮时，这个html会追加

<div class='toggled_content1' style="padding-bottom:15px"></div>
<div class='toggled_content' style='display:none;'>
    <div class="form-group">
        <div class="col-md-2 col-xs-12"> 
            <div class="input-group">
                <input type="text" name="sno[]" class="form-control" placeholder="S. No."/>
            </div>
        </div>
    </div>
</div>

并切换javascript，

jQuery(document).ready(function($){
    $('.toggler').on('click',function(){
        var fff=$(".toggled_content").html();
        $(".toggled_content1").append(fff); 
    });
});

当我点击添加按钮，如何增加S. No. Automaticlaly时，你们可以帮助我。

Answer 1

你需要保留一个计数器以获得下一个S.一种方法可以是获取已经插入的.form-group个元素的数量，并为其添加1以获得下一个S. no。

$(document).ready(function($){
    $('.toggler').on('click',function(){
      var newSNum = $(".toggled_content1 .form-group").length + 1;
        var fff = $(".toggled_content").html();
        $(".toggled_content1").append(fff); 
        $(".toggled_content1 .form-group").eq( newSNum - 1 ).find("input").val( newSNum );
    });
});

.input-group
{
  clear: both;
  margin: 10px auto;
}

.toggler
{
  border: thin solid red;
  height: 50px;
  width: 50px;
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="input-group">
    <input type="text" name="sno[]" class="form-control" placeholder="S. No." value="1"/>
</div>


<span class='toggler date'>
    <a class="btn btn-condensed btn-sm">
        <div style="font-size:16px"> 
            <i class="fa fa-plus-square"></i>
        </div>
    </a>
</span>
<span class='toggler date' style='display:none;'>
    <a class="btn btn-condensed btn-sm">
        <div style="font-size:16px"> 
            <i class="fa fa-plus-square"></i>
        </div>
    </a>
</span>

<div class='toggled_content1' style="padding-bottom:15px"></div>


<div class='toggled_content' style='display:none;'>
    <div class="form-group">
        <div class="col-md-2 col-xs-12"> 
            <div class="input-group">
                <input type="text" name="sno[]" class="form-control" placeholder="S. No."/>
            </div>
        </div>
    </div>
</div>

Answer 2

试试这个;

$(function () {

  $('.toggler').on('click', function () {

    var fff = $(".toggled_content").html();

    if (!isNaN(fff)) {

        console.log(parseInt(fff,10) + 1);
        $(".toggled_content1").html(parseInt(fff, 10) + 1);
    }
 });

});

单击切换时增加序列号

2 个答案: