我如何选择一个元素/元素块使用他们的CSS标记作为选择器？
我还是个新手，我一直在做这个代码...其想法是复制google注册表单，其中输入类型被分组，并且仅在回答了前一组输入类型之后才显示。
我想要实现的方法是将它们分组为包装标记，并通过jQuery选择它们。下面是jquery片段
null
<body>
<div class="cover">
<form method="post" action="">
<div id="wrapper" class="wrapper">
<h1>Identity</h1>
<label>First Name</label><input type="text" name="fname"><br><br>
<label>Last Name</label><input type="text" name="lname"><br><br><br>
<label>Civil Status</label>
<select name="civil_status" id="cv_stat">
<option value="Single">Single</option>
<option value="Married">Married</option>
<option value="Widowed">Widowed</option>
<option value="Annulled">Anulled</option>
</select><br><br>
<label>Email</label><input type="email" name="email"><br><br>
<div id="next" class="next">
<div>Next</div>
</div>
</div>
<div id="wrapper" class="wrapper">
<h1>Identity</h1>
<label>First Name</label><input type="text" name="fname"><br><br>
<label>Last Name</label><input type="text" name="lname"><br><br><br>
<label>Civil Status</label>
<select name="civil_status" id="cv_stat">
<option value="Single">Single</option>
<option value="Married">Married</option>
<option value="Widowed">Widowed</option>
<option value="Annulled">Anulled</option>
</select><br><br>
<label>Email</label><input type="email" name="email"><br><br>
<div id="next" class="next">
<div>Next</div>
</div>
</div>
<div id="wrapper" class="wrapper">
<h1>hello</h1>
<label>First Name</label><input type="text" name="fname"><br><br>
<label>Last Name</label><input type="text" name="lname"><br><br><br>
<label>Civil Status</label>
<select name="civil_status" id="cv_stat">
<option value="Single">Single</option>
<option value="Married">Married</option>
<option value="Widowed">Widowed</option>
<option value="Annulled">Anulled</option>
</select><br><br>
<label>Email</label><input type="email" name="email"><br>
</div>
</form>
</div>
</body>null
但是，我尝试使用以下代码以包装器标记作为第二个元素的目标：
null
$(function(){
var divs = $("#wrapper");
$("#next").click(function(){
var div = divs[0];
div.hide();
})
})null
它不断地产生这样的错误：
registration.js:7 Uncaught TypeError: div.css is not a function
at HTMLDivElement.<anonymous> (registration.js:7)
at HTMLDivElement.dispatch (jquery.min.js:2)
at HTMLDivElement.v.handle (jquery.min.js:2)
对我做错了什么有什么见解或想法吗？我真的被困在这里了。谢谢
共有1个答案
这里语义上正确的方法是使用fieldset元素作为包装元素-一个fieldset用于将相似或相似的字段组合到一个集合组中。legend元素是为字段集提供标题或标题的相关元素。
无需尝试解决所有问题--并且只关注基于用户交互显示下一组字段的想法--您可以将具有display:none的“hidden”类应用于字段集。然后有选择地移除类（因此根据用户交互（例如单击next按钮）显示字段集）。
显然，对此还需要做更多的工作--如果需要的话，验证以确保在进入下一节之前填充了所有输入。从已经显示的字段集中隐藏next按钮（甚至切换旧的字段集并使用“后退”按钮导航到先前填充的字段集）。
但是我想要得到的是，通过正确地应用字段集--您所需要做的就是以字段集为目标来显示/隐藏子字段，并根据用户交互对其进行更改。
另外，正如前面提到的，ID必须是唯一的，我不喜欢使用
元素来导致换行和添加间距，这正是display：block和margin css样式规则的用处。但我把它都留在那里了因为它是你所拥有的。
因此，要显示结果--填入正在显示的字段，然后单击“next”，您将看到下一个fieldset和assocuiated字段将出现。
null
const nextButtons = document.querySelectorAll('.next');
nextButtons.forEach(function(nextButton){
nextButton.addEventListener('click', showNextFieldset);
})
function showNextFieldset(){
// show next fieldset by removing the hidden class from the first matching fieldset
document.querySelector('.question-group.hidden').classList.remove('hidden');
// hide previous "next" button by adding the hidden class to the first matching button
document.querySelector('button:not(.hidden)').classList.add('hidden');
}.button-wrapper {
text-align:right
}
fieldset {
border: none;
}
legend {
font-size: 18px;
font-weight: 600;
}
label{
display: inline-block;
width: 100px;
}
input, select{
display: inline-block;
width: 200px;
}
.hidden {
display: none;
}<div class="cover">
<fieldset class="question-group">
<legend>Identity</legend>
<label>Title</label>
<select name="civil_status" id="cv_stat">
<option value=""selected disabled></option>
<option value="Mr">Mr</option>
<option value="Mrs">Mrs</option>
<option value="Ms">Ms</option>
<option value="Other">Other</option>
</select><br><br>
<label>First Name</label>
<input type="text" name="fname"><br><br>
<label>Last Name</label>
<input type="text" name="lname"><br><br>
<div class="button-wrapper">
<button type="button" class="next">Next</button>
</div>
</fieldset>
<fieldset class="question-group hidden">
<legend>Contact</legend>
<label>Phone number</label>
<input type="text" name="phNumber"><br><br>
<label>Mobile Number</label>
<input type="text" name="mobileNumber"><br><br><br>
<label>Email</label>
<input type="email" name="email"><br><br>
<div class="button-wrapper">
<button type="button" class="next">Next</button>
</div>
</fieldset>
<fieldset class="question-group hidden">
<legend>Status</legend>
<label>Civil Status</label>
<select name="civil_status" id="cv_stat">
<option value="Single">Single</option>
<option value="Married">Married</option>
<option value="Widowed">Widowed</option>
<option value="Annulled">Anulled</option>
</select><br><br>
</fieldset>
</div>-
本文向大家介绍Jsoup 使用CSS选择器选择元素，包括了Jsoup 使用CSS选择器选择元素的使用技巧和注意事项，需要的朋友参考一下 示例 您可以在此处找到支持的选择器的详细概述。
-
问题内容： 如何使用选择器在CSS中选择元素的上述元素 在这里，我想使用class ，以便可以使用CSS选择器获取上述元素。 问题答案： 纯CSS不可能做到这一点…
-
问题内容： 是否可以在CSS中选择多个具有某个特定类，id等父的元素？例如： 如果不是，是否有办法选择该元素的所有子元素？ 问题答案： 是否可以在CSS中选择多个具有某个特定类，id等父的元素？ 当前，不幸的是，并非没有复制整个父选择器并指定所有后代，而是1： 直到选择器3最终确定后，他们才提出了伪类表示法来进行此操作，直到最近，基本实现才开始出现。 简而言之，现在已成为标准的伪类称为。在遥远的将
-
问题内容： 我试图在ID或类’B’的元素中选择类’A’的第一个元素。我尝试了> +和第一个子选择器的组合，因为它不是类元素’B’中的第一个元素。它起作用了，但是…我试图覆盖一些默认的CSS，并且我无法控制服务器端，似乎类’A’元素有时在不同的位置生成。这是一个例子： 有时，“ B”类的名称有所不同，“ A”之前的元素也有所不同。那么，有什么方法可以选择元素“ C”中首次出现的“ A”吗？因为“ C
-
问题内容： 我有一堆带有类名的元素，但是我似乎无法使用以下CSS规则选择第一个元素： 该选择器有什么问题，我该如何纠正？ 多亏了这些评论，我才知道该元素必须是其父元素的第一个子元素才能被选中，而事实并非如此。我具有以下结构，并且该规则失败，如注释中所述： 我该如何针对上课的第一个孩子？ 问题答案： 这是作者误解工作方式的最著名例子之一。在CSS2介绍，该伪类表示其父的第一个孩子。而已。有一个非常普
-
我试着练习用CSS选择器获取值，我想出了这个（不像预期的那样工作） （我也尝试过) 我对的期望：第三个没有id属性和data-ad-show属性的元素被选中，其值将是所需的值3。