为啥“必需”类只添加到第一个 div 元素，而不是接下来的两个？
Posted
技术标签:
【中文标题】为啥“必需”类只添加到第一个 div 元素，而不是接下来的两个？【英文标题】：Why "required" class is added to only first div element, but not next two?为什么“必需”类只添加到第一个 div 元素，而不是接下来的两个？ 【发布时间】：2015-12-01 06:22:44 【问题描述】：我是一名新的编码员，这是我第一次尝试编码。 我有 3 个相同的 div 元素（mandatorysex1、mandatorysex2、mandatorysex3），它们仅在 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();
提前感谢您的回答！
【问题讨论】：
ID 必须是唯一的。更改为 class 和.classname 而不是 #id。强制性行为也不好玩。
相同的结果 - ID 更改为“更多”唯一的； .classname 使用。没有不同。关于性，是的，同意:)但无能为力:-D
您好，谢谢您的建议！我之前误解了它并保持 div 元素的 ID 唯一。那时它不起作用。但是当我使输入元素的 ID 唯一时，它起作用了。请参阅下面的解决方案。再次感谢！你摇滚！
我想补充一点，“name”比“id”更重要。我通过删除名称的“唯一性”进行了实验，它又回到了早期的问题。保持“名称”的唯一性非常重要。
【参考方案1】：
可能不言而喻，但请确保您包含 jQuery 库。否则，在每次评估之后添加console.log(return value)，以评估代码在返回结果之前的距离 - 其中值将是您期望在应该触发给定回调事件后返回的结果，或者只是一条确认消息只有在评估到达代码块的某个部分时才会打印到控制台（下面的代码 sn-p 中给出的示例）。
如果我理解正确，如果添加了 3 或更大的值，所有字段组都应该在 <input/> 标签中添加“必需”类 - 这就是我在复制和运行您的代码。
请参阅以下示例：
JS斌：https://jsbin.com/guqegohuka/edit?html,js,console,output
以及下面的代码sn-p：
$(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>【讨论】：
【参考方案2】：感谢mplungjan 的建议，我可以解决这个问题。基本上，当表单验证输入字段时，它第一次看到具有相同 ID 的输入字段时，它会在那里结束验证。它似乎没有进入下一组具有相同 ID 的输入元素。 因此，首先我将所有输入元素的类更改为必需，然后更改 jquery 以删除类。但是，最重要的是，我更改了最后两个“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");
【讨论】：
我想补充一点，“name”比“id”更重要。我尝试删除名称的“唯一性”，它又回到了早期的问题。保持“名称”的唯一性非常重要。【参考方案3】：替换
.find(":input").addClass("required")
与
.find("#mandatorysex2 input").addClass("required");
对第三个 div 也做同样的事情
【讨论】：
对不起，你能解释一下吗？可能是，通过显示代码。我是初学者。谢谢<! id="mandatorysex1" class=""> <! id="mandatorysex2" class=""> <! id="mandatorysex3" class=""> 在每个 div 末尾的代码中使用。请删除此标签。
好的。那些只是标记。但是，我也删除并尝试了。结果相同。
if ($("#number_of_sexs").val() >= 1) $("#mandatorysex1").show() .find(":input").addClass("required"); else $("#mandatorysex1").hide(); 问题可能是由于比较.. 删除 '>=' 并且只检查 '=='【参考方案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
【讨论】：
以上是关于为啥“必需”类只添加到第一个 div 元素，而不是接下来的两个？的主要内容，如果未能解决你的问题，请参考以下文章
当通过 innerHTML 添加元素时，为啥我的动画会“重播”？