Javascript類列表對象和查詢選擇器進行切換

Question

有人可以幫我，因為我現在被困住了。 我必須使用classlist對象和queryselector在兩個字段集之間進行表單切換。 我必須使用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;
}

必須切換名為“項目”和“階段”的字段集。 因此，當我單擊名為project的單選按鈕時，舞台形式必須消失，反之亦然。 我不能使用onclick，因為我的老師不希望我使用onclick。

Answer 1

您的代碼中有一些問題：

1. 您模糊啟動form標簽。
2. project.classList.toggle(".project"); 需要是project.classList.toggle("project"); 2.1在這種情況下，您不能使用切換類，因為您不想切換，而是要添加和刪除。 您只想同時顯示一個部分。 對？
3. 您有多個復選框，因此需要將click event附加到每個復選框。

 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>