系统地删除编号值作为删除元素jQuery

时间：2018-06-10 11:07:52

标签： javascript jquery html math

我有一个数学编码问题。下面是我的实际脚本的简化版本。根据当前日期和附加日期的第一个顺序“.1”在顶部生成订单号。在底部是一个可折叠按钮，其中包含一个样本ID，该ID应为ordernumber.1，每个样本附加一个“。＃”。所以样本5将是ordernumber.1.5。

问题是，通过单击样本旁边的删除样本按钮删除样本时，不会对样本编号重新排序。因此，样本1,2,3,4,5和删除3将是1,2,4,5。我需要它们是1,2,3,4然后与订单号相同：ordernumber.1.5应该成为ordernumber.1.4。我认为应该在删除按钮代码中添加某种“for”循环以考虑以下按钮。

$(document).ready(function() {
  var d = new Date();
  var month = d.getMonth() + 1;
  var day = d.getDate();
  var year = d.getFullYear() - 2000;
  var date = year +
    (month < 10 ? '0' : '') + month +
    (day < 10 ? '0' : '') + day;
  var order = 1
  var output = date + "." + order;
  $("#ordernumber").text(output);
});

$(document).ready(function() {
  $("#addsmplbtn").click(function() {
    var element = $(".samplesinfo.hidden").clone(true);
    element.removeClass('hidden').insertAfter(".samplesinfo:last");
    $(".panel").slideUp();
    var n = $(".samplesinfo").length - 1;
    element.find('.samplebtn').text('Sample ' + n);
    $("#nsamples").text(n);
    var ordernumber = $("#ordernumber").text();
    var output = (ordernumber + "." + n);
    $("#sampleid").text(output);
  });

  $(".delbtn").click(function() {
    $(this).closest(".samplesinfo").remove();
    var n = $(".samplesinfo").length - 1;
    $("#nsamples").text(n);
  });

  $(".samplebtn").click(function() {
    $(this).next(".panel").slideToggle();
  });
  $("#showsamples").click(function() {
    $(".panel").slideDown();
  });
  $("#hidesamples").click(function() {
    $(".panel").slideUp();
  });
  $("#alldelbtn").click(function() {
    $(".samplesinfo").remove();
  });
  $("#addsmplbtn").trigger('click');
});
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<style>
  .hidden {
    display: none;
  }
</style>

<body>

  <div class="main_body">
    <div class="maincolumn">
      <div id="Add New Order" class="tabcontent">
        <div class="column">
          <div class="container">
            <div class="subcontainer">
              <p><b>Order Number:</b></p>
              <span id="ordernumber" class="fixedsampinfo"></span>
              <br>
              <p><b>Number of Samples:</b></p>
              <span id="nsamples" class="fixedsampinfo"></span>
              <br>
            </div>
          </div>
        </div>
        <div class="mySidenav" id="mySidenav">
          <button id="addsmplbtn">Add Additional Sample</button>
          <br>
          <br>
          <br>
          <button id="showsamples">Show All Sample Information</button>
          <br>
          <br>
          <br>
          <button id="hidesamples">Hide All Sample Information</button>
          <br>
          <br>
          <br>
          <button id="alldelbtn" class="alldelbtn">Delete All Samples</button>
        </div>
        <div id="samplesinfo" class="samplesinfo hidden">
          <button class="delbtn" style="width:50%;float:right;">Delete Sample</button>
          <button id="samplebtn" class="samplebtn" style="width:50%;">Sample</button>
          <div class="panel">
            <div class="container">
              <div id="usrInput" class="subcontainer">
                <p style="float:left;margin: 5px;"><b>Sample ID:</b></p>
                <span id="sampleid" class="fixedsampinfo"></span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>





</body>

</html>

另外两个问题，对我来说，我无法解决的问题是，当点击“删除所有样本”按钮时，它还会删除隐藏的“模板”，因此无法添加新样本。最后，订单号仅添加到第二个添加的样本中，ID不正确，因此第一个样本为空，第二个样本为ordernumber.1.1，应为ordernumber.1.2。

任何帮助都会受到赞赏，这些问题让我很生气！

1 个答案:

答案 0 :(得分：0)

注意： 不要对samplesinfo元素内的元素使用任何id属性。因为您重现此元素，所以在这种情况下会重复ID。如您所知，ID属性应该是唯一的。

执行此操作： 

$( document ).ready( function() {
  var d = new Date(),
      month = d.getMonth() + 1,
      day = d.getDate(),
      year = d.getFullYear() - 2000,
      date = year + ( month < 10 ? '0' : '' ) + month + ( day < 10 ? '0' : '' ) + day,
      order = 0,
      output = date + '.' + order;

  $( '#ordernumber' ).text( output );

  $( '#addsmplbtn' ).click(function() {
    var element = $( '.samplesinfo.hidden' ).clone( true );
    element.removeClass( 'hidden' ).insertAfter( '.samplesinfo:last' );
    order++;
    $( '.samplebtn:last' ).text( 'Sample ' + order );
    $( '.sampleid:last' ).text( output + '.' + order );
    $( '#nsamples' ).text( order );
    $( '.panel:last' ).slideUp()
  } )

  $( '.delbtn' ).click( function() {
    $( this ).closest( '.samplesinfo' ).remove();
    order--;
    $( '#nsamples' ).text( order );
    $( '.samplebtn' ).each( function( index, element ) {
      $( this ).text( 'Sample ' + index )
    } )
    $( '.sampleid' ).each( function( index, element ) {
      $( this ).text( output + '.' + index )
    } )
  } )

  $( '#alldelbtn' ).click( function() {
    $( '.samplesinfo' ).not( '.hidden' ).remove();
    order = 0;
    $( '#nsamples' ).text( order )
  } )

  $( '.samplebtn' ).click( function() { $( this ).next( '.panel' ).slideToggle() } )
  $( '#showsamples' ).click( function() { $( '.panel' ).slideDown() } )
  $( '#hidesamples' ).click( function() { $( '.panel' ).slideUp() } )
  $( '#addsmplbtn' ).trigger( 'click' )
})
.hidden {
  display: none
}
button {
  background-color: #86af49;
  border: none;
  color: white;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  cursor: pointer;
  -webkit-transition-duration: .3s;
  transition-duration: .3s
}
button:hover {
  background-color: #405d27
}
.delbtn {
  background-color: #f7786b
}
.delbtn:hover {
  background-color: #c94c4c
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="main_body">
  <div class="maincolumn">
    <div id="Add New Order" class="tabcontent">
      <div class="column">
        <div class="container">
          <div class="subcontainer">
            <p><b>Order Number: </b><span id="ordernumber" class="fixedsampinfo"></span></p>
            <p><b>Number of Samples: </b><span id="nsamples" class="fixedsampinfo"></span></p>
          </div>
        </div>
      </div>
      <div class="mySidenav" id="mySidenav">
        <button id="addsmplbtn">Add Additional Sample</button>
        <button id="showsamples">Show All Sample Information</button>
        <button id="hidesamples">Hide All Sample Information</button>
        <button id="alldelbtn" class="alldelbtn">Delete All Samples</button>
        <br><br>
      </div>
      <div class="samplesinfo hidden">
        <button class="delbtn" style="width:50%; float: right">Delete Sample</button>
        <button class="samplebtn" style="width:50%;">Sample</button>
        <div class="panel" style="clear: right; background-color: #deeaee; padding: 5px">
          <div class="container">
            <div class="subcontainer">
              <p><b>Sample ID: </b><span class="fixedsampinfo sampleid"></span></p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

相关问题
最新问题