我如何选择一个元素/元素块使用他们的CSS标记作为选择器？

提问者：小点点

我如何选择一个元素/元素块使用他们的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>