Question

我有一个数学编码问题。下面是我的实际脚本的简化版本。根据当前日期和附加日期的第一个顺序“.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。

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

Answer 1

注意：不要对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>

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

1 个答案: