Jquery Append方法导致重叠

Jquery Append Method Causes Overlapping

本文关键字：重叠 方法 Append Jquery      更新时间：2023-11-16

因此，我尝试在用户提交表单后使用append方法来应用新的div。它很有效，但如果在发送结果后再次提交表单，它会附加另一组输出。如果他们重新提交，我希望它只是替换输出。有办法解决这个问题吗？这是我的JS:

for(var i = 0; i < finalArray.length; i++){
        if(i === 0){
          $("div#outputRow").prepend("<div class='col-md-4' id='row1'>");
          $("div#row1").append(finalArray[i]);
          if (i === finalArray.length - 1 ){
            $("div#outputRow").append("</div>");
          }
        } else if (i > 0 && i < 30){
          $("div#row1").append(finalArray[i]);
          if (i === finalArray.length - 1){
            $("div#outputRow").append("</div>");
          }
        } else if (i === 30){
          $("div#outputRow").append("</div>");
          $("div#outputRow").append("<div class='col-md-4' id='row2'>");
          $("div#row2").append(finalArray[i]);
          if (i === finalArray.length - 1){
            $("div#outputRow").append("</div>");
          }
        } else if (i > 30 && i < 60){
          $("div#row2").append(finalArray[i]);
          if (i === finalArray.length - 1){
            $("div#outputRow").append("</div>");
          }
        } else if (i === 60){
          $("div#outputRow").append("</div>");
          $("div#outputRow").append("<div class='col-md-4' id='row3'>");
          $("div#row3").append(finalArray[i]);
          if (i === finalArray.length - 1){
            $("div#outputRow").append("</div>");
          }
        } else if (i > 60 && i < 90){
          $("div#row3").append(finalArray[i]);
          if (i === finalArray.length - 1){
            $("div#outputRow").append("</div>");
          }
        } else if (i === 90){
          $("div#outputRow").append("</div>");
          $("div#outputRow").append("<div class='col-md-4' id='row4'>");
          $("div#row4").append(finalArray[i]);
          if (i === finalArray.length - 1){
            $("div#outputRow").append("</div>");
          }
        } else if (i > 90 && i < 120){
          $("div#row4").append(finalArray[i]);
          if (i === finalArray.length - 1){
            $("div#outputRow").append("</div>");
          }
        }
      }

以及相关的HTML:

<!DOCTYPE html>
  <html>
    <head>
      <link href="css/pingpong-styles.css" rel="stylesheet" type="text/css">
      <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css">
      <script src="js/jquery-1.12.2.js"></script>
      <script src="js/pingpong.js"></script>
      <title>Ping Pong</title>
    </head>
    <body>
      <div class="container">
        <h1>Ping Pong</h1>
        <form id='pingpong'>
          <label for="enteredNumber">Please Enter A Number:
          <input type="text" id="enteredNumber"></input>
          <button type="submit">Submit</button>
        </form>
        <div class="row" id="outputRow">
          <ul id="outputList">
          </ul>
        </div>
      </div>
    </body>
  </html>

谢谢！

$("#pingpong").submit(function(evt){
   evt.preventDefault();
   $("#outputRow").html('<ul id="outputList"></ul>');
   // ..other stuff
   // .. your FOR loop
  for(var i = 0; i < finalArray.length; i++){
    // ... your code
  }
});

重置outputRow on Form提交的HTML。这将清除以前提交的结果。

相关文章：