我想用切換鍵隱藏/顯示字段集。但它不會工作!有人可以幫幫我嗎?我不知道我的代碼有什麼問題,我想切換它。最後兩個字段集必須隱藏,並且必須通過單擊單選按鈕來啓用。隱藏和顯示字段集
<section>
<h1>Aanmelden</h1>
<p>Bent u geïnteresseerd in samenwerken met CMD Amsterdam? Dat kan!Tijdens de opleiding werken studenten aan projecten voor echte opdrachtgevers.Ook lopen de studenten stage, in het tweede en afstudeerjaar.
<em>CMD Amsterdam zoekt altijd naar positieve verbindingen met de creatieve stad Amsterdam.</em>
Voor het aanmelden van stageplekken of projecten kunt u onderstaand formulier invullen Wij nemen zo nodig contact met u op nadat het formulier is verstuurd. Voor vragen of opmerkingen kunt u <a href="contact.html">contact</a> met ons op.
</p>
</section>
<form>
<fieldset>
<legend>Contactgegevens</legend>
<label for="Naam">Naam</label>
<input id="Naam" type="text" required/>
<label for="Bedrijf">Bedrijf</label>
<input id="Bedrijf" type="text" required/>
<label for="Adres">Adres</label>
<input id="Adres" type="text" required/>
<label for="Postcode">Postcode</label>
<input id="Postcode" type="text" pattern="[1-9][0-9]{3}\s?[a-zA-Z]{2}" required/>
<label for="Plaats">Plaats</label>
<input id="Plaats" type="text" required/>
<label for="Telefoon">Telefoon</label>
<input id="Telefoon" type="text" required/>
<label for="Email">Email</label>
<input id="Email" type="text" required/>
Ik wil mijn aanmelden:
<input id="Project" type="radio" required/>
<label for="Project">Voor een project</label>
<input id="Stage" type="radio" required/>
<label for="Stage">Als stagebedrijf</label>
</fieldset>
<fieldset >
<legend>Project</legend>
<label for="Titel">Titel</label>
<input id="Titel" type="text"/>
<label for="Opdrachtomschrijving">Opdrachtomschrijving</label>
<input id="Opdrachtomschrijving" type="text"/>
<label for="Doelgroepomschrijving">Doelgroepomschrijving</label>
<input id="Doelgroepomschrijving" type="text"/>
<label for="Doelstelling">Doelstelling/intentie van het project</label>
<input id="Doelstelling" type="text"/>
<label for="Looptijd">Looptijd (maximaal 24 maanden)</label>
<input id="Looptijd" type="range" min="1" max="24"/>
<label for="Deadline">Deadline</label>
<input id="Deadline" type="date"/>
Geschikt voor
<input id="eerstejaars" type="radio"/>
<label for="eerstejaars">Eerstejaars studenten</label>
<input id="tweedejaars" type="radio"/>
<label for="tweedejaars">Tweedejaars studenten</label>
<input id="derdejaars" type="radio"/>
<label for="derdejaars">Derdejaars studenten</label>
<input id="afstudeer" type="radio"/>
<label for="afstudeer">Afstudeer studenten</label>
<input id="onbekend" type="radio"/>
<label for="onbekend">Onbekend</label>
Opmerkingen?
<input id="opmerkingen" type="text"/>
</fieldset>
<fieldset>
<legend>Stage</legend>
Geschikt voor:
<input id="tweedestage" type="radio"/>
<label for="tweedestage">Tweedejaars studenten</label>
<input id="afstudeerders" type="radio"/>
<label for="afstudeerders">Afstudeer studenten</label>
<input id="nietbekend" type="radio"/>
<label for="nietbekend">Onbekend</label>
Hoe lang is de stage?
<input id="tien" type="radio"/>
<label for="tien">Tien weken</label>
<input id="twintig" type="radio"/>
<label for="twintig">Twintig weken</label>
<input id="unknown" type="radio"/>
<label for="unknown">Onbekend</label>
<label for="begindatum">Begindatum</label>
<input id="begindatum" type="date"/>
<label for="werkzaamheden">Beschrijving werkzaamheden</label>
<input id="werkzaamheden" type="text"/>
Beschrijving stagebedrijf
<label for="bedrijfsnaam">Bedrijfsnaam</label>
<input id="bedrijfsnaam" type="text" required/>
<label for="address">Adres</label>
<input id="address" type="text" autocomplete="off"/>
<label for="zip">Postcode</label>
<input id="zip" type="text" pattern="[1-9][0-9]{3}\s?[a-zA-Z]{2}
"/>
<label for="woonplaats">Plaats</label>
<input id="woonplaats" type="text" required/>
<label for="sector">Sector</label>
<input id="sector" type="text"/>
<label for="core">Core Business</label>
<input id="core" type="text"/>
Opmerkingen?
<input id="opmerking" type="text"/>
</fieldset>
<input id="verzenden" type="submit"/>
</form>
</body>
body{
background: #efefef;
min-height: 100%;
font: 100%/1.5 helvetica, arial;
}
label {
display: block;
margin: 0 0 1em;
}
label > input {
display: block;
}
input[type="radio"] + label{
display: inline;
}
input, button {
font: inherit;
}
fieldset{
background: linear-gradient(45deg, #fff, lime);
}
.is-invisible{
display: none;
}
.is-visible {
display: block;
}
JAVASCRIPT:
var fieldset = document.querySelector('fieldset:nth-of-type(2,3)');
fieldset.classlist.add('hidefieldset');
document.querySelector('input[type="radio"]').onclick = function() {
fieldset.classList.add('showfieldset');
}
document.querySelector('input[type="radio"]:last-of-type').onclick = function() {
fieldset.classlist.remove('showfieldset');
}
感謝您的幫助XX
看起來您正在引用實際上不存在的類。您正在添加CSS類的「hidefieldset」和「showfieldset」,而我在代碼中看不到這些內容。也許嘗試使用is-invisible和is-visible類,然後看看是否可以使用 – guildsbounty 2014-10-03 18:58:08
謝謝,但即使我改變了它,它也不起作用! – user4106882 2014-10-03 19:01:30
另一件需要指出的事情。 'querySelector'只會選擇符合您佈局條件的第一個元素。要麼將它分成兩個變量,要麼查詢querySelectorAll(請注意,querySelectorAll返回一個需要循環的數組)。如果你想能夠批量修改DOM元素,可以考慮使用jQuery來代替。 – guildsbounty 2014-10-03 19:04:37