为什么“required”类只添加到第一个div元素，而不是下一个？

Question

我是一名新编码员，这是我第一次尝试编码。 我有3个相同的div元素（mandatorysex1，mandatorysex2，mandatorysex3），它们的ID不同。我希望他们显示，取决于另一个输入的值。一旦显示，他们的输入类别需要更改为“required”。 我可以（虽然，部分）上面两个（感谢本论坛早期问题的大量帮助）。

但是，实际上只需要第一个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库。否则，在每次评估后添加<input/>以评估代码在返回结果之前得到多远 - 其中值将是您应该在触发给定回调事件后返回的结果，或者只是确认如果评估已到达代码块的某个部分，则只会打印到控制台的消息（示例在下面的代码片段中给出）。

如果我理解正确的话，如果添加了3或更高的值，那么所有字段组都应该在$(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'); } }标记中添加“必需”类 - 这就是我在复制时看到的情况运行你的代码。 请参阅以下示例： JS Bin：https://jsbin.com/guqegohuka/edit?html,js,console,output

以及下面的代码段：

<!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>

$(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');
}
  }

您还可以使用switch case语句评估表达式：

<!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>

File source = new File("Any Source file path");
File[] listOfFiles = source.listFiles();  

for (int i = 0; i < listOfFiles.length; i++) {

    if (listOfFiles[i].isFile()) {

        String filename = listOfFiles[i].getName();

        if (filename.endsWith(".x") && filename.contains(aPattern)) {
            try {
                FileUtils.copyDirectory(source, dest));
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
    }
}

Answer 2

感谢mplungjan的建议，我可以解决这个问题。基本上，当表单验证输入字段时，第一次看到具有相同ID的输入字段时，它会在那里结束验证。它似乎没有进入具有相同ID的下一组输入元素。 所以，首先我将所有输入元素的类更改为required，然后更改jquery以删除class。但是，最重要的是，我改变了最后两个'div'元素中所有'input'元素的“name”和“id”，瞧！它已经解决了。这是修改后的脚本。

//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" required>
    </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"  required></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" required>
                <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="title2" id="title2" value="" placeholder="Title of sex" required>
    </div>
   </div>

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

  </div>

  <div class="row">   
  <div class="col-lg-6">
    <label>Current status of sex</label>
      <select class="form-control" name="cur_status2" id="cur_status2" required>
                <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="title3" id="title3" value="" placeholder="Title of sex" required>
    </div>
   </div>

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

  </div>

  <div class="row">   
  <div class="col-lg-6">
    <label>Current status of sex</label>
      <select class="form-control" name="cur_status3" id="cur_status3" required>
                <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();

else
$("#mandatorysex1").hide();
.find(":input").removeClass("required");

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

$("#mandatorysex2").show();

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

if ($("#number_of_sexs").val() >= 3)
$("#mandatorysex3").show();

else        
$("#mandatorysex3").hide();
.find(":input").removeClass("required");
}

Answer 3

替换

    .find(":input").addClass("required")

与

    .find("#mandatorysex2 input").addClass("required");

也为第3个div做同样的事情

Answer 4

change your toggleFields function
function toggleFields()
  {
    if($("#number_of_sexs").val() >= 3)
    {
     //your code
    }else if ($("#number_of_sexs").val() >= 2)
    {
     //your code
    }else if ($("#number_of_sexs").val() >= 1)
    {
     //your code
    }    

  }