Question

所以我试图在用户提交表单后使用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>

谢谢！

Answer 1

$("#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的HTML。这将清除先前提交的结果。

Jquery Append方法导致重叠

1 个答案: