javascript - 在特定输入字段和完整表单之间的显示之间切换表单

Question

已关闭。此问题不符合 Stack Overflow guidelines 。目前不接受答案。

---

这个问题似乎与 help center 中定义的范围内的编程无关。 .

已关闭 9 年前。

Improve this question

我在一个页面中有一个表单，用于管理在另一个页面中发布的职位。该表单有几个关键字段，用于决定职位发布是否获得批准或拒绝。我希望表单最初仅显示那些指定为关键或选择过程关键的字段。并且还有一个切换按钮可以显示完整的表单，以防审核者想要了解有关正在审核的特定工作的更多信息。

如何指定我想要设为关键的字段？

如何在这些字段和完整表单之间切换？

到目前为止我得到的表格是这样的(关键输入是所需的行业、经验和技能):

<div class="row">
<div class="col-md-8 col-md-offset-2 col-sm-6 col-sm-offset-3">
    <div class="w-section inverse">
        <div class="w-box sign-in-wr bg-5">
            <div class="form-body">
                <h5>
                    Please provide the following information about employment opportunity.
                </h5>
                <div class="row">
                    <form class="form-light padding-20" id="addJob">
                        <div class="form-group">
                            <div class="col-lg-6">
                                <label style="font-size:16px;" data-for="title">Title</label>
                                <input type="text" class="form-control" name="title" id="title" placeholder="">
                            </div>
                            <div class="col-md-12">
                                <label style="font-size:16px;" data-for="salary">Salary</label>
                                <input type="text" class="form-control" name="salary" id="salary" placeholder="">
                            </div>
                            <div class="col-lg-12">
                                <label style="font-size:16px;" data-for="location">Location</label>
                                <input type="text" class="form-control" name="location" id="location" placeholder="">
                            </div>
                            <div class="col-lg-4">
                                <label style="font-size:16px;" data-for="company">Company</label>
                                <input type="text" class="form-control" name="company" id="company" placeholder="">
                            </div>
                            <div class="col-lg-4">
                                <label style="font-size:16px;" data-for="jobDescription">Job Description</label>
                                <input type="text" class="form-control" name="jobdescription" id="jobdescription" placeholder="">
                            </div>
                            <div class="col-lg-2">
                                <label style="font-size:16px;" data-for="industry">Industry</label>
                                <input type="text" class="form-control" name="industry" id="industry" placeholder="">
                                <label class="checkbox"><input type="checkbox" name="profit" id="profit">Profit</a></label>
                                <label class="checkbox"><input type="checkbox" name="nonprofit" id="nonprofit">Non-Profit</a></label>
                            </div>
                            <div class="col-lg-2">
                                <label style="font-size:16px;" data-for="experience">Experience</label>
                                <input type="text" class="form-control" name="experience" id="experience" placeholder="">
                            </div>
                            <div class="col-lg-2">
                                <label style="font-size:16px;" data-for="reqSkills">Skills required</label>
                                <select name="requiredSkillsDropdown">
                                    <option value="HTML5">HTML5</option>
                                    <option value="CS3">CS3</option>
                                    <option value="javascrip">Javascript</option>
                                    <option value="jquery">jQuery</option>
                                </select>
                            </div>
                            <div class="col-lg-6">
                                <label style="font-size:16px;" data-for="workexp">Address</label>
                                <input type="text" class="form-control" name="street" id="street" placeholder="Street">
                                <input type="text" class="form-control" name="city" id="city" placeholder="City">
                                <input type="text" class="form-control" name="state" id="state" placeholder="State">
                                <input type="text" class="form-control" name="zip" id="zip" placeholder="Zip">
                            </div>
                            <div class="col-lg-4">
                                <label style="font-size:16px;" data-for="contact">Contact</label>
                                <input type="text" class="form-control" name="contact" id="zip" placeholder="">
                            </div>
                            <div class="col-lg-12">
                                <button class="btn btn-two pull-right" id="capturejobinfo" type="button">Submit</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

为输入容器提供自定义 data-* 属性，指示它们是否重要(上面的示例)

<div class="col-lg-2" data-critical="true">
    <label style="font-size:16px;" data-for="experience">Experience</label>
    <input type="text" class="form-control" name="experience" id="experience" placeholder="">
</div>

对于其他人，使用false表示数据关键。然后您可以使用以下方式进行切换:

$("div.form-group div[data-critical=true]").show(); //to show

或 .hide() 隐藏。