Question

我的代码的第一部分工作得很好。它具有用户类型，在班级中的学生数量，点击提交，然后根据他们的输入返回响应。我试图在用户在第一步中提交提交时出现下一步。我需要第一步（numberOfStudents）中的数字来为每个学生创建文本字段和下拉列表。（firstName，lastName和studentLevel）。 EX：用户输入24并点击提交。获得回复“你将拥有6支4人队伍”。第二步显示24个firstName，lastName和studentLevel条目字段的实例，最后带有提交按钮。现在，除了studentList的循环以创建24（x3）条目字段之外，一切正常。这也是使用bootstrap。我对编码比较陌生，所以请详细解释:)

在等待响应时，我还尝试了一个do-while循环，它会吐出3个输入字段的一个实例。它似乎不喜欢i＆lt; numberOfStudents.length作为条件。

$("#teamForm").submit(function(event) {
  event.preventDefault();
  const numberOfStudents = parseInt($("#numberOfStudents").val());
  let responseHTML = '<p class="responseText">';
  if (numberOfStudents % 4 === 0) {
    responseHTML += 'You will have ' + numberOfStudents / 4 + ' teams of 4 in your class.';
  } else if (numberOfStudents % 4 === 1) {
    responseHTML += 'You will have ' + (numberOfStudents - 1) / 4 + ' teams of 4 in your class and one team of 5.'
  } else if (numberOfStudents % 4 === 2) {
    responseHTML += 'You will have ' + (numberOfStudents - 6) / 4 + ' teams of 4 in your class and two teams of 3.'
  } else {
    responseHTML += 'You will have ' + (numberOfStudents - 3) / 4 + ' teams of 4 in your class and one team of 3.'
  }
  responseHTML += '</p>'

  $('#studentNumberResponse').css('display', 'block').html(responseHTML);
  $('#numberOfStudents').val('');
}).submit(function(event) {
  event.preventDefault();
  const numberOfStudents = parseInt($("#numberOfStudents").val());
  let responseHTMLSecond = '<div class="card-block"> <h4 class="card-title">Step 2: Enter Your Students</h4> <p class="card-text">Add your students to create each individual team.</p> <form id="studentsForm">';
  let studentList = '<div class="form-group"> <input type="text" class="form-control" id="studentFirstName" aria-describedby="studentFirstName" placeholder="First Name"> </div> <div class="form-group"> <input type="text" class="form-control" id="studentLastName" aria-describedby="studentLastName" placeholder="Last Name"> </div> <div class="form-group"> <label for="exampleSelect1">Select Student Level</label> <select class="form-control" id="exampleSelect1"> <option>High</option> <option>Mid-High</option> <option>Mid-Low</option> <option>Low</option> </select> </div>';

  for(let i = 0; i < numberOfStudents.length; i +=1) {
responseHTMLSecond += studentList[i];
  }
  responseHTMLSecond += '<button type="submit" class="btn btn-primary" id="submitStudents">Submit</button> </form> <small class="text-muted">Click the Submit button when you have finished adding all students.</small> </div>';
  $('#secondsStep').css('display', 'block');
  $('#secondsStep').html(responseHTMLSecond);
});

* {
  box-sizing: border-box;
}

#studentNumberResponse,
#secondsStep,
#studentListResponse {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!DOCTYPE HTML>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>OnPoint Team Generator</title>
  <meta name="description" content="OnPoint Team Generator">
  <meta name="author" content="MeganRoberts">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
  <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
  <link rel="stylesheet" href="main.css">
</head>

<body>
  <div class="card">
    <h3 class="card-header" style="text-align: center;">OnPoint Team Generator</h3>
    <div class="card-block">
      <h4 class="card-title">Step 1: Number of Teams</h4>
      <p class="card-text">How many students do you have in your class?</p>
      <form id="teamForm">
        <div class="form-group">
          <input type="text" class="form-control" id="numberOfStudents" aria-describedby="numberStudents" placeholder="Enter Number of Students">
        </div>
        <button type="submit" class="btn btn-primary" id="submitTeams">Submit</button>
      </form>
    </div>
  </div>
  <div class="card">
    <div class="card-block" id="studentNumberResponse">
    </div>
  </div>
  <div id="secondsStep" class="card">
  </div>
  <div class="card">
    <div class="card-block" id="studentListResponse">
    </div>
  </div>
  <script src="app.js"></script>
</body>

</html>

Answer 1

我看了你的代码。问题是你的for循环附加html不是正确的，因为下面的行。当您清除文本框时，您不会再次设置NumberOfStudents变量。我修好了。继承人jsfiddle - ＆gt; https://jsfiddle.net/b6p29da5/

$('#numberOfStudents').val('');

清除文本框后，您尝试使用以下行

设置变量

const numberOfStudents = parseInt($("#numberOfStudents").val());

由于这个原因，你的循环没有运行，你的html没有以你想要的方式连接。

Answer 2

使用上面的建议。 - 我希望分享以防万一。

$( "#teamForm" ).submit(function( event ) {
    event.preventDefault();
    const numberOfStudents = parseInt($("#numberOfStudents").val());
    let responseHTML = '<p class="responseText">';
    if (numberOfStudents % 4 === 0){
      responseHTML += 'You will have ' + numberOfStudents / 4 + ' teams of 4 in your class.';
    }
    else if (numberOfStudents % 4 === 1) {
      responseHTML += 'You will have ' + (numberOfStudents - 1) /4 + ' teams of 4 in your class and one team of 5.'
    }
    else if (numberOfStudents % 4 === 2) {
      responseHTML += 'You will have ' + (numberOfStudents - 6) /4 + ' teams of 4 in your class and two teams of 3.'
    }
    else {
      responseHTML += 'You will have ' + (numberOfStudents - 3) /4 + ' teams of 4 in your class and one team of 3.'
    }
    responseHTML += '</p>'

    $('#studentNumberResponse').css('display', 'block').html(responseHTML);

  }).submit(function(event) {
    event.preventDefault();
    const numberOfStudents = parseInt($("#numberOfStudents").val());
    let responseHTMLSecond = '<div class="card-block"> <h4 class="card-title">Step 2: Enter Your Students</h4> <p class="card-text">Add your students to create each individual team.</p> <form id="studentsForm">';
    let i = 0;
    do {
      i++;
      responseHTMLSecond += '<h4 class="numberingStudents">Student ' + i + '</h4>';
      responseHTMLSecond += '<div class="form-group"> <h4> <input type="text" class="form-control" id="studentFirstName'+i+'" aria-describedby="studentFirstName" placeholder="First Name"> </div> <div class="form-group"> <input type="text" class="form-control" id="studentLastName'+i+'" aria-describedby="studentLastName" placeholder="Last Name"> </div> <div class="form-group"> <label for="exampleSelect1">Select Student Level</label> <select class="form-control" id="exampleSelect'+i+'"> <option>High</option> <option>Mid-High</option> <option>Mid-Low</option> <option>Low</option> </select> </div>';
    } while (i < numberOfStudents);
    responseHTMLSecond += '<button type="submit" class="btn btn-primary" id="submitStudents">Submit</button> </form> <small class="text-muted">Click the Submit button when you have finished adding all students.</small> </div>';
    $('#secondsStep').css('display', 'block').html(responseHTMLSecond);
    $('#numberOfStudents').val('');
  });

* {
  box-sizing: border-box;
}

#studentNumberResponse, #secondsStep, #studentListResponse {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!DOCTYPE HTML>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>OnPoint Team Generator</title>
    <meta name="description" content="OnPoint Team Generator">
    <meta name="author" content="MeganRoberts">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="main.css">
  </head>
  <body>
    <div class="card">
      <h3 class="card-header" style="text-align: center;">OnPoint Team Generator</h3>
      <div class="card-block">
        <h4 class="card-title">Step 1: Number of Teams</h4>
        <p class="card-text">How many students do you have in your class?</p>
        <form id="teamForm">
          <div class="form-group">
            <input type="text" class="form-control" id="numberOfStudents" aria-describedby="numberStudents" placeholder="Enter Number of Students">
          </div>
          <button type="submit" class="btn btn-primary" id="submitTeams">Submit</button>
        </form>
      </div>
    </div>
    <div class="card">
      <div class="card-block" id="studentNumberResponse">
      </div>
    </div>
    <div id="secondsStep" class="card">
    </div>
    <div class="card">
      <div class="card-block" id="studentListResponse">
      </div>
    </div>
    <script src="app.js"></script>
  </body>
</html>

Answer 3

这里有一些问题，我会尝试按顺序解决每个问题。

parseInt可能会产生意外结果。有关此方法，请参阅docs。

const numberOfStudents = parseInt($("#numberOfStudents").val());

应该是：

const numberOfStudents = parseInt($("#numberOfStudents").val(), 10);

重复表达式numberOfStudents % 4;将其存储为变量

// for example
const remainder = numberOfStudents % 4;
let responseHTML = '<p class="responseText">';
if (remainder === 0) {/*...*/}

您可能会发现switch比4层if/else语句更合适，但在条件相对较少的情况下，性能提升可以忽略不计。
您正在绑定2个独立的submit侦听器（使用.submit(fn)两次）。 jQuery将按照绑定的顺序执行它们。在第一个函数中，您要做的最后一件事是清除#numberOfStudents
的值
```
$('#numberOfStudents').val('');
```
在下一个函数中，您要做的第一件事就是提取#numberOfStudents的值，该值仅设置为''。
```
const numberOfStudents = parseInt($("#numberOfStudents").val()); // NaN
```
这可能是您的代码无法正常工作的原因。

jquery循环添加输入字段

3 个答案: