用于切换的Javascript classlist对象和查询选择器

Question

有人可以帮助我，因为我现在被困住了。我必须使用classlist对象和queryselector在两个fieldsets之间切换一个表单。我必须在Javascript中使用一个函数，将类列表添加到fieldset。

现在，这是我在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;
}

字段集称为＆＃34;项目＆＃34;和＆＃34;阶段＆＃34;不得不切换。因此，当我点击名为project的单选按钮时，舞台表单必须消失，反之亦然。 我无法使用onclick，因为我的老师不希望我使用它。

Answer 1

您的代码中存在一些问题：

1. 您对开始form标记进行模糊处理。
2. project.classList.toggle(".project");需要project.classList.toggle("project"); 2.1在这种情况下，您不能使用切换类，因为您不想切换，要添加和删除。您想要同时显示一个部分。正确？
3. 您有多个复选框，因此您需要将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>