要切换的Javascript类列表对象和查询选择器
Javascript classlist object and query selector to toggle
谁能帮帮我,我现在卡住了。我必须使用classlist对象和查询选择器在两个字段集之间进行表单切换。我必须使用Javascript中的一个函数,将类列表添加到字段集。
现在,这是我的javascript代码:
var click = document.querySelector('form>fieldset>label>input[type="radio"]');
var project = document.querySelector(".project");
var stage = document.querySelector(".stage");
click.addEventListener("click", function() {
if (click === "stage") {
project.classList.toggle(".project");
}
else {
stage.classList.toggle(".stage");
}
});
这是我在HTML中的代码:
<fieldset>
<legend>Ik wil mij aanmelden:</legend>
<label>
<input type="radio" name="submit-for" value="project">
<span>Voor een project</span>
</label>
<label>
<input type="radio" name="submit-for" value="stage">
<span>Als stagebedrijf</span>
</label>
</fieldset>
<fieldset id="project" class="project">
<legend>Project</legend>
<label>
<span>Titel:</span>
<input type="text" name="project-title">
</label>
<label>
<span>Opdrachtomschrijving:</span>
<textarea name="project-description"></textarea>
</label>
<label>
<span>Doelgroepomschrijving:</span>
<textarea name="project-target-audience"></textarea>
</label>
<label>
<span>Doelstelling/intentie van het project:</span>
<textarea name="project-goal"></textarea>
</label>
<label>
<span>Looptijd:</span>
<input type="text" name="project-duration">
</label>
<label>
<span>Deadline:</span>
<input type="date" name="project-deadline">
</label>
<fieldset>
<legend>Geschikt voor</legend>
<label><input type="checkbox" name="project-eerstejaars"> Eerstejaars studenten</label>
<label><input type="checkbox" name="project-tweedejaars"> Tweedejaars studenten</label>
<label><input type="checkbox" name="project-derdejaars"> Derdejaars studenten</label>
<label><input type="checkbox" name="project-afstudeer"> Afstudeer studenten</label>
<label><input type="checkbox" name="project-onbekend"> Onbekend</label>
</fieldset>
<label>
<span>Opmerking:</span>
<textarea name="project-comments"></textarea>
</label>
</fieldset>
<fieldset id="stage" class="stage">
<legend>Stage</legend>
<fieldset>
<legend>Geschikt voor</legend>
<label><input type="checkbox" name="stage-tweedejaars"> Tweedejaars studenten</label>
<label><input type="checkbox" name="stage-afstudeerders"> Afstudeer studenten</label>
<label><input type="checkbox" name="stage-onbekend"> Onbekend</label>
</fieldset>
<fieldset>
<legend>Hoe lang is de stage</legend>
<label><input type="radio" name="stage-duration" value="10"> 10 weken</label>
<label><input type="radio" name="stage-duration" value="20"> 20 weken</label>
</fieldset>
<label>
<span>Begindatum:</span>
<input type="date" name="stage-startdate">
</label>
<label>
<span>Beschrijving stagewerkzaamheden</span>
<textarea name="stage-description"></textarea>
</label>
<fieldset>
<legend>Beschrijving stagebedrijf</legend>
<label>
<span>Bedrijfsnaam:</span>
<input type="text" name="stage-company-name">
</label>
<label>
<span>Adres:</span>
<input type="text" name="stage-address">
</label>
<label>
<span>Postcode:</span>
<input type="text" name="stage-postal">
</label>
<label>
<span>Plaats:</span>
<input type="text" name="stage-place">
</label>
<label>
<span>Sector:</span>
<input type="text" name="stage-sector">
</label>
<label>
<span>Core business:</span>
<input type="text" name="stage-core-business">
</label>
</fieldset>
<label>
<span>Opmerking:</span>
<textarea name="stage-comments"></textarea>
</label>
</fieldset>
<input type="submit" value="Aanmelden">
</form>
这是我的CSS代码:
.project {
display: none;
}
.stage {
display: none;
}
称为"项目"answers"阶段"的字段集必须切换。因此,当我点击名为project的单选按钮时,舞台表单必须消失,反之亦然。我不能用onclick,因为我的老师不让我用那个。
你的代码有一些问题:
- 您忘记了起始
form
标签。 -
project.classList.toggle(".project");
需为project.classList.toggle("project");
2.1在这种情况下你不能使用切换类,因为你不想切换,你想添加和删除。你想在同一时间只展示一个部分。对吧? - 你有多个复选框,所以你需要将
click
事件附加到每个复选框上。
var click = document.querySelectorAll('form fieldset:first-child>label>input[type="radio"]');
var project = document.querySelector(".project");
var stage = document.querySelector(".stage");
for (var cl = 0; cl < click.length; cl++) {
click[cl].addEventListener("change", function() {
//if (this.value === "stage") {
project.classList.toggle("show");
project.classList.toggle("hide");
stage.classList.toggle("show");
stage.classList.toggle("hide");
//stage.classList.remove("hide");
//}
//else {
// project.classList.remove("hide");
// stage.classList.add("hide");
//}
});
}
.hide {
display:none;
}
<form>
<fieldset>
<legend>Ik wil mij aanmelden:</legend>
<label>
<input type="radio" name="submit-for" value="project" checked="checked">
<span>Voor een project</span>
</label>
<label>
<input type="radio" name="submit-for" value="stage">
<span>Als stagebedrijf</span>
</label>
</fieldset>
<fieldset id="project" class="project hide">
<legend>Project</legend>
<label>
<span>Titel:</span>
<input type="text" name="project-title">
</label>
<label>
<span>Opdrachtomschrijving:</span>
<textarea name="project-description"></textarea>
</label>
<label>
<span>Doelgroepomschrijving:</span>
<textarea name="project-target-audience"></textarea>
</label>
<label>
<span>Doelstelling/intentie van het project:</span>
<textarea name="project-goal"></textarea>
</label>
<label>
<span>Looptijd:</span>
<input type="text" name="project-duration">
</label>
<label>
<span>Deadline:</span>
<input type="date" name="project-deadline">
</label>
<fieldset>
<legend>Geschikt voor</legend>
<label><input type="checkbox" name="project-eerstejaars"> Eerstejaars studenten</label>
<label><input type="checkbox" name="project-tweedejaars"> Tweedejaars studenten</label>
<label><input type="checkbox" name="project-derdejaars"> Derdejaars studenten</label>
<label><input type="checkbox" name="project-afstudeer"> Afstudeer studenten</label>
<label><input type="checkbox" name="project-onbekend"> Onbekend</label>
</fieldset>
<label>
<span>Opmerking:</span>
<textarea name="project-comments"></textarea>
</label>
</fieldset>
<fieldset id="stage" class="stage">
<legend>Stage</legend>
<fieldset>
<legend>Geschikt voor</legend>
<label><input type="checkbox" name="stage-tweedejaars"> Tweedejaars studenten</label>
<label><input type="checkbox" name="stage-afstudeerders"> Afstudeer studenten</label>
<label><input type="checkbox" name="stage-onbekend"> Onbekend</label>
</fieldset>
<fieldset>
<legend>Hoe lang is de stage</legend>
<label><input type="radio" name="stage-duration" value="10"> 10 weken</label>
<label><input type="radio" name="stage-duration" value="20"> 20 weken</label>
</fieldset>
<label>
<span>Begindatum:</span>
<input type="date" name="stage-startdate">
</label>
<label>
<span>Beschrijving stagewerkzaamheden</span>
<textarea name="stage-description"></textarea>
</label>
<fieldset>
<legend>Beschrijving stagebedrijf</legend>
<label>
<span>Bedrijfsnaam:</span>
<input type="text" name="stage-company-name">
</label>
<label>
<span>Adres:</span>
<input type="text" name="stage-address">
</label>
<label>
<span>Postcode:</span>
<input type="text" name="stage-postal">
</label>
<label>
<span>Plaats:</span>
<input type="text" name="stage-place">
</label>
<label>
<span>Sector:</span>
<input type="text" name="stage-sector">
</label>
<label>
<span>Core business:</span>
<input type="text" name="stage-core-business">
</label>
</fieldset>
<label>
<span>Opmerking:</span>
<textarea name="stage-comments"></textarea>
</label>
</fieldset>
<input type="submit" value="Aanmelden">
</form>
相关文章:
- 在mongoose中使用正则表达式在对象数组中进行查询搜索
- MongoDB嵌套对象数组后查询
- jQuery对象从html表中查询为两个一维数组,用于Chartist图表
- 如何将查找对象值传递到FetchXml查询中
- 使用查询将对象数组发布到asp.net-mvc控制器操作的正确方法是什么
- javascript对象与阅读文档——初学者查询效率
- 如何在dojo中查询对象类型
- 如何在 GET 请求中序列化查询的对象
- j查询设置中的数据表对象
- j查询对象到字符串请帮助
- 解析查询查找方法返回对象而不是数组
- j查询选择器不选择对象
- angularjs $resource将查询资源列表转换为对象数组
- j查询对象预期错误
- 如何在javascript中克隆mongoose查询对象
- 当查询返回对象时,Express Mongo回调返回undefined
- 将查询字符串反序列化为JSON对象
- Javascript对象查询
- 为一个angularjs对象查询dom
- 猫鼬:对嵌套对象查询不正确的ObjectId时报错