javascript - 删除添加的 div 应导致计数器减少，并且应按顺序重命名下一个后续 div

标签 javascript jquery counter show-hide

单击添加按钮后，我可以按顺序添加 7 个 div。当我尝试删除中间的 div 时，应按照顺序重命名/更新后续的 div。

我的 HTML 

<div class="container">
  <div class="row">
    <div id="driver<%=i%>" class="panel panel-default knowledge">
      <div class="panel-heading2">
        <h4 class="panel-title collapsed" data-toggle="collapse" data-parent="#accordion" data-target="#collapse<%=i%>" aria-expanded="false">
          <a class="accordion-toggle driver-title<%=i%>">Driver <%=i%></a>
          <div class="pull-right"><span class="glyphicon glyphicon-plus"></span></div>
        </h4>
      </div>
      <div id="collapse<%=i%>" class="panel-collapse collapse" aria-expanded="false" style="height: 0px;">
        <div class="panel-body">
          <div class="col-sm-12 col-md-12 col-lg-12">                     
            <div class="gap gap-mini"></div>
            <div class="form-group">
              <label class="col-sm-4 control-label">Full Name</label>
              <div class="col-sm-6">
                <input type="text" id="drname<%=i%>" name="drname"  class="form-control" placeholder="Full Name">
              </div>
            </div>
            <div class="remove_wrap_but">
              <a href="javascript:void(0)" class="btn btn-yellow" id="<%=i%>" onclick="removeValueItem(this.id)">- remove driver</a>
            </div>
          </div>
        </div>                   
      </div>
    </div>
  </div>
</div>

我循环此内容 7 次，以便可以按 1 2 3 4 5 6 7 等顺序添加 div 7 次。

我的javascript代码如下。

var valueItemCount = 2;
  if($('#hdItemCount').val()!='2'){
    valueItemCount =$('#hdItemCount').val();
  }
  var isRemove = false;
  var isAdded = false;
  $('#hdItemCount').val(valueItemCount);

  function addValueItem() {
      //alert(isRemove);
      //$('#errmessage').html("");
      console.log("valueItemCount addValueItem   : "+valueItemCount);
      console.log("isRemove    : "+isRemove);
      if(valueItemCount <8) {
        if (isRemove && !isAdded) ++valueItemCount;
        // alert(valueItemCount);
        $('#driver' + valueItemCount).show();
        ++valueItemCount;
        $('#hdItemCount').val(valueItemCount);
        isAdded = true;
      } else {
        //$('#errmessage').html("Maximm Limit Reached");
      }
      // alert(isAdded);
      console.log("isAdded    : "+isAdded);
  }

  function removeValueItem(cnt) {
    if($('#hdItemCount').val()!='2'){
      valueItemCount =$('#hdItemCount').val();
    }
    if (isAdded && !isRemove) {--valueItemCount;}
    alert(cnt);
    console.log(" removeValueItem cnt    : "+cnt);
    console.log("valueItemCount   removeValueItem : "+valueItemCount);
    var count=Number(cnt)+1
    //alert('count1111'+count);
    $('#driver' + cnt).hide();
    if (isAdded && isRemove) {  --valueItemCount; }
    $('#hdItemCount').val(valueItemCount);
    //alert(count);
    console.log("count   : "+count);
    var i;
    for (i = count; i <8; i++) {
      var j=i-1;
      $('#'+i).attr('id',j);
      $('#driver' + i).attr('id','driver'+j);
      $('.driver-title' + i).text('Driver '+j);
    }
    isRemove = true;
    console.log(" isRemove remove    : "+isRemove);
    console.log(" isAdded remove    : "+isAdded);
    if (valueItemCount == 2) {
      isRemove = false;
      isAdded = false;
    }
  }
  if($('#hdItemCount').val()!='2'){
      valueItemCount =$('#hdItemCount').val();
  }
  var itemcnt =  '<%=cntvalue%>';
  for(var i=valueItemCount;i<=8;i++){
      $('#driver'+i).hide();
  }
  for (var i=1;i<valueItemCount;i++){
      console.log("valueItemCount   : "+valueItemCount);
      $('#driver'+i).show();
     $('#hdItemCount').val(valueItemCount);
  }

使用此代码，我可以添加最多 7 个 div，这是正确的。当我尝试删除订单之间的一个特定 div 时，后续 div 被重命名，但后来我无法进一步添加/删除。删除只能运行一次。

任何人都可以帮忙解决这个问题吗？

最佳答案

  1. 通过点击添加图标最多可以添加 7 个驱动程序
  2. 删除任何驱动程序会删除特定驱动程序，从而对所有 ID 重新排序。
  3. 删除每个驱动程序，将为最后添加另一个驱动程序留出空间，使其总数不会超过 7；

function addValueItem() {
  if ($('div.driverContainer div.knowledge[id*=driver]:not(.hidden)').length < 7) {
    var templateDiv = $('.driver-template').clone(true);
    templateDiv.removeClass('driver-template hidden').addClass('container driverContainer');
    templateDiv.clone(true).insertAfter($('div.driverContainer:last'));
    reAssignIDs();
  }
}

function removeValueItem(elem) {
  if ($('div.driverContainer div.knowledge[id*=driver]:not(.hidden)').length == 1) {
    addValueItem();
  }
  $(elem).closest('div.driverContainer').remove();
  reAssignIDs();
}

function reAssignIDs() {
  var Index = 1;
  $('div.driverContainer div.knowledge[id*=driver]').each(function() {
    if (!$(this).hasClass('hidden')) {
      $(this).attr('id', 'driver' + Index);
      $(this).find('h4').attr('data-target', '#collapse' + Index);
      $(this).find('h4 a').text('Driver ' + Index);
      $(this).find('div[id*=collapse]').attr('id', 'collapse' + Index);
      $(this).find('input[id*=drname]').attr('id', 'drname' + Index);
      $(this).find('.remove_wrap_but a.btn-yellow').attr('id', Index);
      Index++;
    }
  });
  $(".glyphicon.glyphicon-plus").addClass('hidden');
  if ($('div.driverContainer div.knowledge[id*=driver]:not(.hidden)').length < 7) {
    $(".glyphicon.glyphicon-plus:last").removeClass('hidden');
  }
}
$(".panel-title").click(function(e) {
  if (!$(e.target).is('.glyphicon.glyphicon-plus'))
    $(this).closest('.row').find('.panel-collapse').toggleClass('collapse');
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="driver-template hidden">
  <div class="row">
    <div id="driver" class="panel panel-default knowledge">
      <div class="panel-heading2">
        <h4 class="panel-title collapsed" data-toggle="collapse" data-parent="#accordion" data-target="#collapse" aria-expanded="false">
          <a class="accordion-toggle driver-title1">Driver X</a>
          <div class="pull-right"><span class="glyphicon glyphicon-plus" onclick="addValueItem()"></span></div>
        </h4>
      </div>
      <div id="collapse1" class="panel-collapse collapse" aria-expanded="false" style="height: 0px;">
        <div class="panel-body">
          <div class="col-sm-12 col-md-12 col-lg-12">
            <div class="gap gap-mini"></div>
            <div class="form-group">
              <label class="col-sm-4 control-label">Full Name</label>
              <div class="col-sm-6">
                <input type="text" id="drname" name="drname" class="form-control" placeholder="Full Name">
              </div>
            </div>
            <div class="remove_wrap_but">
              <a href="javascript:void(0)" class="btn btn-yellow" id="" onclick="removeValueItem(this)">- remove driver</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="container driverContainer">
  <div class="row">
    <div id="driver1" class="panel panel-default knowledge">
      <div class="panel-heading2">
        <h4 class="panel-title collapsed" data-toggle="collapse" data-parent="#accordion" data-target="#collapse1" aria-expanded="false">
          <a class="accordion-toggle driver-title1">Driver 1</a>
          <div class="pull-right"><span class="glyphicon glyphicon-plus" onclick="addValueItem()"></span></div>
        </h4>
      </div>
      <div id="collapse1" class="panel-collapse collapse" aria-expanded="false" style="height: 0px;">
        <div class="panel-body">
          <div class="col-sm-12 col-md-12 col-lg-12">
            <div class="gap gap-mini"></div>
            <div class="form-group">
              <label class="col-sm-4 control-label">Full Name</label>
              <div class="col-sm-6">
                <input type="text" id="drname1" name="drname" class="form-control" placeholder="Full Name">
              </div>
            </div>
            <div class="remove_wrap_but">
              <a href="javascript:void(0)" class="btn btn-yellow" id="1" onclick="removeValueItem(this)">- remove driver</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
</div>

*请注意，我创建了一个带有类“driver-template”的模板 div。单击“添加”选项时，我只是在末尾插入了此模板，并重命名了所有 id。您甚至可以让 7 个驱动程序最初使用您的循环。进一步的工作(例如删除和添加)将使用此逻辑进行相应的工作。*

如果这仍然不是您所需要的，请解释更多。

关于javascript - 删除添加的 div 应导致计数器减少，并且应按顺序重命名下一个后续 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45207936/

上一篇：javascript - 如何动态启用 Jquery 网格列中的 HTML 标签

下一篇：javascript - 使用 JavaScript SDK 查询用户授予 FB 应用的 Facebook 页面权限

相关文章：

java - 需要同步增量计数器？

javascript - 在没有多个 Canvas 的情况下对 Canvas 进行分层

javascript - 将 2 个 css 类用于点击功能在 JQuery 中不起作用

$(this).find (':nth-child(2)' 上的 jquery 选择器混合)

javascript - 将 JavaScript Math.pow 用于 Excel 公式

python - 在内部嵌套的 defaultdict 中查找值总和的最大值

python - 如何计算包含特定单词的文档？

javascript - 没有jQuery的onmouseover过渡效果

javascript - 如何从 HTML 中的父元素转发子元素？

javascript - 如何在 jQuery 中访问父项的子项

©2024 IT工具网  联系我们