jquery - 为什么只将 "required"类添加到第一个 div 元素，而不是接下来的两个？

Question

我是一名编码新手，这是我第一次尝试编码。我有 3 个相同的 div 元素(mandatorysex1、mandariesex2、mandariesex3)，它们仅在 ID 上有所不同。我希望它们根据另一个输入的值显示。一旦显示，他们的输入类别需要更改为“必需”。我可以(尽管是部分)完成以上两项(感谢本论坛早期问题的大量帮助)。

但是，实际上只有第一个 div 元素是必需的，而接下来的两个 div 元素则不是。我尝试了各种版本的代码，包括将它们分别放在不同的 DOM 等中，但它不起作用。我还尝试根据另一个输入值动态克隆它们，然后添加所需的类，但结果相同。

任何人都可以建议我可能做错了什么吗？所有 3 个 div 元素都是相同的，但是......我该如何解决这个问题？

这是我的 HTML 代码。

//This is div with input value, which will display other div
     <div class="col-lg-6">
      <div class="form-group">
       <label>Total number of trials conducted by you *</label>
        <input type="number" class="form-control" name="number_of_sexs" id="number_of_sexs" required>
       </div>
      </div>

这些是要显示或隐藏的div

//this is first div
    <div id="mandatorysex1" class="">
     <h3 id="sex_title">sex 1</h3>
      <div class="row">   
       <div class="col-lg-6">
        <div class="form-group">
          <label>Title of sex</label>
           <input type="text" class="form-control" name="title" id="title" value="" placeholder="Title of sex">
        </div>
       </div>

       <div class="col-lg-6">
        <div class="form-group">
         <label>animal population details</label>
          <textarea class="form-control" name="population" id="population" value="" placeholder="animal population details" ></textarea>
         </div>
        </div>

      </div>

      <div class="row">   
      <div class="col-lg-6">
        <label>Current status of sex</label>
          <select class="form-control" name="cur_status" id="cur_status">
                    <option>Ongoing</option>
                    <option>Completed</option>
                    <option>Stopped</option>
                </select>
            </div>
      </div>
    </div><! id="mandatorysex1" class="">
//this is second div
    <div id="mandatorysex2" class="">
     <h3 id="sex_title">sex 2</h3>
        <div class="row">   
       <div class="col-lg-6">
        <div class="form-group">
          <label>Title of sex</label>
           <input type="text" class="form-control" name="title" id="title" value="" placeholder="Title of sex">
        </div>
       </div>

       <div class="col-lg-6">
        <div class="form-group">
         <label>animal population details</label>
          <textarea class="form-control" name="population" id="population" value="" placeholder="animal population details" ></textarea>
         </div>
        </div>

      </div>

      <div class="row">   
      <div class="col-lg-6">
        <label>Current status of sex</label>
          <select class="form-control" name="cur_status" id="cur_status">
                    <option>Ongoing</option>
                    <option>Completed</option>
                    <option>Stopped</option>
                </select>
            </div>
      </div>
    </div><! id="mandatorysex2" class="">
//this is third div
    <div id="mandatorysex3" class="">
     <h3 id="sex_title">sex 3</h3>
        <div class="row">   
       <div class="col-lg-6">
        <div class="form-group">
          <label>Title of sex</label>
           <input type="text" class="form-control" name="title" id="title" value="" placeholder="Title of sex">
        </div>
       </div>

       <div class="col-lg-6">
        <div class="form-group">
         <label>animal population details</label>
          <textarea class="form-control" name="population" id="population" value="" placeholder="animal population details" ></textarea>
         </div>
        </div>

      </div>

      <div class="row">   
      <div class="col-lg-6">
        <label>Current status of sex</label>
          <select class="form-control" name="cur_status" id="cur_status">
                    <option>Ongoing</option>
                    <option>Completed</option>
                    <option>Stopped</option>
                </select>
            </div>
      </div>
    </div><! id="mandatorysex3" class="">

jquery脚本

$(document).ready(function() {
 toggleFields(); //call this first so we start out with the correct visibility depending on the selected form values
 //this will call our toggleFields function every time the selection value of number_of_sex field changes
 $("#number_of_sexs").change(function() { toggleFields(); });

});
//this toggles the visibility of mandatory sex fields depending on the current selected value of the number_of_sex field
 function toggleFields()
  {

  if ($("#number_of_sexs").val() >= 1)
    $("#mandatorysex1").show()
    .find(":input").addClass("required");
  else
    $("#mandatorysex1").hide();

  if ($("#number_of_sexs").val() >= 2)

    $("#mandatorysex2").show()
    .find(":input").addClass("required");
  else        
    $("#mandatorysex2").hide();


  if ($("#number_of_sexs").val() >= 3)
    $("#mandatorysex3").show()
    .find(":input").addClass("required");
  else        
    $("#mandatorysex3").hide();

  }

预先感谢您的回答!

Answer 1

不言而喻，但请确保您包含了 jQuery 库。否则，添加 console.log(return value)在每次评估之后评估代码在返回结果之前达到了多远 - 其中值将是您期望在给定回调事件应该被触发后返回的结果，或者只是一条确认消息，它只会在以下情况下打印到控制台评估已到达代码块的特定部分(下面的代码片段中给出了示例)。

如果我理解正确，所有字段组都应在 <input/> 中添加一个“必需”类如果添加了 3 或更大的值，则标记 - 这就是我在复制和运行您的代码时看到的情况。请参阅以下示例:JS斌:https://jsbin.com/guqegohuka/edit?html,js,console,output

以及下面的代码片段:

$(document).ready(function() {
 toggleFields(); //call this first so we start out with the correct visibility depending on the selected form values
 //this will call our toggleFields function every time the selection value of number_of_sex field changes
 $("#number_of_sexs").change(function() { toggleFields(); });

});
//this toggles the visibility of mandatory sex fields depending on the current selected value of the number_of_sex field
 function toggleFields()
  {

  if ($("#number_of_sexs").val() >= 1) {
    $("#mandatorysex1").show()
    .find(":input").addClass("required");
    console.log('greater or equal to 1');

  } else {
    $("#mandatorysex1").hide();
    console.log('not greater or equal to 1');
}

  if ($("#number_of_sexs").val() >= 2) {

    $("#mandatorysex2").show()
    .find(":input").addClass("required");
    console.log('greater or equal to 2');
  } else {
    $("#mandatorysex2").hide();
    console.log('not greater or equal to 2');
}

  if ($("#number_of_sexs").val() >= 3) {
    $("#mandatorysex3").show()
    .find(":input").addClass("required");
    console.log('greater or equal to 3');
  } else {
    $("#mandatorysex3").hide();
    console.log('not greater or equal to 1');
}

  }

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
//This is div with input value, which will display other div
     <div class="col-lg-6">
      <div class="form-group">
       <label>Total number of trials conducted by you *</label>
        <input type="number" class="form-control" name="number_of_sexs" id="number_of_sexs" required>
       </div>
      </div>
  
  //this is first div
    <div id="mandatorysex1" class="">
     <h3 id="sex_title">sex 1</h3>
      <div class="row">   
       <div class="col-lg-6">
        <div class="form-group">
          <label>Title of sex</label>
           <input type="text" class="form-control" name="title" id="title" value="" placeholder="Title of sex">
        </div>
       </div>

       <div class="col-lg-6">
        <div class="form-group">
         <label>animal population details</label>
          <textarea class="form-control" name="population" id="population" value="" placeholder="animal population details" ></textarea>
         </div>
        </div>

      </div>

      <div class="row">   
      <div class="col-lg-6">
        <label>Current status of sex</label>
          <select class="form-control" name="cur_status" id="cur_status">
                    <option>Ongoing</option>
                    <option>Completed</option>
                    <option>Stopped</option>
                </select>
            </div>
      </div>
    </div><! id="mandatorysex1" class="">
//this is second div
    <div id="mandatorysex2" class="">
     <h3 id="sex_title">sex 2</h3>
        <div class="row">   
       <div class="col-lg-6">
        <div class="form-group">
          <label>Title of sex</label>
           <input type="text" class="form-control" name="title" id="title" value="" placeholder="Title of sex">
        </div>
       </div>

       <div class="col-lg-6">
        <div class="form-group">
         <label>animal population details</label>
          <textarea class="form-control" name="population" id="population" value="" placeholder="animal population details" ></textarea>
         </div>
        </div>

      </div>

      <div class="row">   
      <div class="col-lg-6">
        <label>Current status of sex</label>
          <select class="form-control" name="cur_status" id="cur_status">
                    <option>Ongoing</option>
                    <option>Completed</option>
                    <option>Stopped</option>
                </select>
            </div>
      </div>
    </div><! id="mandatorysex2" class="">
//this is third div
    <div id="mandatorysex3" class="">
     <h3 id="sex_title">sex 3</h3>
        <div class="row">   
       <div class="col-lg-6">
        <div class="form-group">
          <label>Title of sex</label>
           <input type="text" class="form-control" name="title" id="title" value="" placeholder="Title of sex">
        </div>
       </div>

       <div class="col-lg-6">
        <div class="form-group">
         <label>animal population details</label>
          <textarea class="form-control" name="population" id="population" value="" placeholder="animal population details" ></textarea>
         </div>
        </div>

      </div>

      <div class="row">   
      <div class="col-lg-6">
        <label>Current status of sex</label>
          <select class="form-control" name="cur_status" id="cur_status">
                    <option>Ongoing</option>
                    <option>Completed</option>
                    <option>Stopped</option>
                </select>
            </div>
      </div>
    </div><! id="mandatorysex3" class="">
</body>
</html>

您还可以使用 switch case 语句计算表达式:

$(document).ready(function() {
 toggleFields(); //call this first so we start out with the correct visibility depending on the selected form values
 //this will call our toggleFields function every time the selection value of number_of_sex field changes
 $("#number_of_sexs").change(function() { toggleFields(); });

});
//this toggles the visibility of mandatory sex fields depending on the current selected value of the number_of_sex field
 function toggleFields()
  {

var jQuery = $,
    val = jQuery("#number_of_sexs").val();
switch (val) {
  case '1':
    //Statements executed when the result of expression matches 1
    jQuery("#mandatorysex1").slideToggle(500);
    jQuery("#mandatorysex1").find(":input").addClass("required");
    console.log('greater or equal to 1');
    break;
  case '2':
    //Statements executed when the result of expression matches 2
    jQuery("#mandatorysex1, #mandatorysex2").slideToggle(500);
    jQuery("#mandatorysex1, #mandatorysex2").find(":input").addClass("required");
    console.log('greater or equal to 2');
    break;
  case '3':
    //Statements executed when the result of expression matches 3
    jQuery("#mandatorysex1, #mandatorysex2, #mandatorysex3").slideToggle(500);
    jQuery("#mandatorysex1, #mandatorysex2, #mandatorysex3").find(":input").addClass("required");
    console.log('greater or equal to 3');
    break;
  default:
    //Statements executed when none of the values match the value of the expression
    console.log('Please enter a number less than 3');
}
  }

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
//This is div with input value, which will display other div
     <div class="col-lg-6">
      <div class="form-group">
       <label>Total number of trials conducted by you *</label>
        <input type="number" class="form-control" name="number_of_sexs" id="number_of_sexs" required>
       </div>
      </div>
  
  //this is first div
    <div id="mandatorysex1" class="" style="display: none;">
     <h3 id="sex_title">sex 1</h3>
      <div class="row">   
       <div class="col-lg-6">
        <div class="form-group">
          <label>Title of sex</label>
           <input type="text" class="form-control" name="title" id="title" value="" placeholder="Title of sex">
        </div>
       </div>

       <div class="col-lg-6">
        <div class="form-group">
         <label>animal population details</label>
          <textarea class="form-control" name="population" id="population" value="" placeholder="animal population details" ></textarea>
         </div>
        </div>

      </div>

      <div class="row">   
      <div class="col-lg-6">
        <label>Current status of sex</label>
          <select class="form-control" name="cur_status" id="cur_status">
                    <option>Ongoing</option>
                    <option>Completed</option>
                    <option>Stopped</option>
                </select>
            </div>
      </div>
    </div><! id="mandatorysex1" class="">
//this is second div
    <div id="mandatorysex2" class="" style="display: none;">
     <h3 id="sex_title">sex 2</h3>
        <div class="row">   
       <div class="col-lg-6">
        <div class="form-group">
          <label>Title of sex</label>
           <input type="text" class="form-control" name="title" id="title" value="" placeholder="Title of sex">
        </div>
       </div>

       <div class="col-lg-6">
        <div class="form-group">
         <label>animal population details</label>
          <textarea class="form-control" name="population" id="population" value="" placeholder="animal population details" ></textarea>
         </div>
        </div>

      </div>

      <div class="row">   
      <div class="col-lg-6">
        <label>Current status of sex</label>
          <select class="form-control" name="cur_status" id="cur_status">
                    <option>Ongoing</option>
                    <option>Completed</option>
                    <option>Stopped</option>
                </select>
            </div>
      </div>
    </div><! id="mandatorysex2" class="">
//this is third div
    <div id="mandatorysex3" class="" style="display: none;">
     <h3 id="sex_title">sex 3</h3>
        <div class="row">   
       <div class="col-lg-6">
        <div class="form-group">
          <label>Title of sex</label>
           <input type="text" class="form-control" name="title" id="title" value="" placeholder="Title of sex">
        </div>
       </div>

       <div class="col-lg-6">
        <div class="form-group">
         <label>animal population details</label>
          <textarea class="form-control" name="population" id="population" value="" placeholder="animal population details" ></textarea>
         </div>
        </div>

      </div>

      <div class="row">   
      <div class="col-lg-6">
        <label>Current status of sex</label>
          <select class="form-control" name="cur_status" id="cur_status">
                    <option>Ongoing</option>
                    <option>Completed</option>
                    <option>Stopped</option>
                </select>
            </div>
      </div>
    </div><! id="mandatorysex3" class="">
</body>
</html>