隐藏/显示多个div

Question

我想通过单击一个文本行来隐藏/显示一些def randomisation_edit(request): if request.method == "POST": form = RandomisationForm(request, data=request.POST or None) if form.is_valid(): randomisation = form.save() # randomisation rand = Randomiser(randomisation.ran_num, randomisation.ran_vih, randomisation.ran_sta) # Mise à jour de la base de données -> Patient code pour rendre indisponible la ligne # pour une prochaine randomisation # ListeRandomisation # 1.Récupération de la ligne dans la liste de rando bras = rand['bras'] # 2.Mise à jour de la ligne dans la liste de rando patient = ListeRandomisation.objects.get(ran_ide = bras) patient.ran_dis = randomisation.ran_num # pat patient.save() # Medicament # 1.Récupération de la ligne dans la liste de correspondance médicament medicament = rand['medicament'] # 2.Mise à jour de la ligne dans la liste de correspondance médicament medicament = Medicament.objects.get(med_ide = medicament) medicament.ran_dis = randomisation.ran_num # pat medicament.save() # mise à jour de la variable de session can_randomize request.session['can_randomize'] = is_randomizable(medicament.ran_dis) # Mise à jour de la table Randomisation avec le bras et le numéro de boite attribués randomisation.ran_bra = patient.ran_bra randomisation.ran_med = medicament.med_num randomisation.ran_log_dat = datetime.now() randomisation.ran_log = request.user.username randomisation.save() return redirect('randomization:confirmation', pk = randomisation.pk) else: form = RandomisationForm(request) return render(request, 'randomization/randomisation_edit.html', {'form': form}) 框。总而言之，它必须执行类似Android File Explorer的操作。

当我点击div文本字段时，这2张图片显示了差异。

这是我当前代码的一部分：

Mes Vidéos

    function folderChange(param) {
      var video=document.getElementById('v');
      var file=document.getElementById('f');
      if(param==1) {
        video.style.display = "block";
        file.style.display = "none";
      }
      else {
        file.style.display = "block";
        video.style.display = "none";
      }  
    }

    .filefolder {
      display: none;
    }
    .videofolder {
      display: block;
    }

当我点击 <div class="groove2"></div> <div class="chemin filefolder" id="f" style="background-color:#FAF9F8" style="color:#BDBCBA"><font color="#575654">Flashdisk <b>> Mes Fichiers</b></font></div> <div class="chemin videofolder" id="v" style="background-color:#FAF9F8" style="color:#BDBCBA"><font color="#575654">Flashdisk ><b onclick="folderChange(0)"> Mes Fichiers</b> ><b> Mes Vidéos</b></font></div> <div class="groove2"></div> <div id="madiv"> <div class="videofolder" id="v"> <div> <input type="checkbox" id="contactChoice1" name="fichier" value="Video1"> <img class="icone" src="video.jpg"> <label for="Video1">Video1.mp4</label> </div> <div class="groove"></div> </div> <div id="f" class="filefolder"> <div class="folder"> <img class="icone" src="dossier.jpg" onclick="folderChange(1)"> <p onclick="folderChange(1)"><b>Mes Vidéos</b></p> </div> <div class="groove"></div> </div> <div class="filefolder"> <div id="f" class="blok"> <input class="off" type="checkbox" disabled="true" id="contactChoice1" name="fichieroff" value="Video1"> <img class="icone" src="xls.jpg"> <label for="Video1"><b>Resultats.xlsx</b></label> </div> <div class="groove"></div> </div>时，我希望做的是更改display和videofolder的{​​{1}}值，但是在屏幕上，没有任何变化（或仅显示路径）。

我是HTML和Javascript的新手。

注意：目前没有文件读取器，我只是在显示器上工作。

Answer 1

如果您只需要显示/隐藏两种类型的事物，则可以用单行对其进行迭代，然后对它们应用classList.toggle()：

function folderChange() {
  document.querySelectorAll(".video, .file").forEach(el => el.classList.toggle("show"))
}

.video,
.file {
  display: none
}

.show {
  display: block
}

<button onclick="folderChange()">Show Files</button>
<button onclick="folderChange()">Show Videos</button>

<p class="video">video a</p>
<p class="file show">file a</p>
<p class="video">video b</p>
<p class="video">video c</p>
<p class="file show">file b</p>
<p class="file show">file c</p>
<p class="file show">file d</p>
<p class="video">video d</p>
<p class="video">video e</p>
<p class="file show">file e</p>