为什么切换在JS中只发生一次

Question

As the title says, I need to toggle a class on some buttons and I don't really understand how to do it more than once.正如标题所说，我需要在某些按钮上切换 class 并且我真的不明白如何多次执行此操作。 The problem is with the second block of code (the one with document.querySelector), not with the other one.问题在于第二个代码块（带有 document.querySelector 的那个），而不是另一个代码块。

The other one is there because it is used for navigation, and it has to be there.另一个在那里，因为它用于导航，它必须在那里。

If you click on "executie", the text will change.如果单击“执行”，文本将发生变化。 Below it, there will be an arrow to change the text.在其下方，将有一个箭头来更改文本。 It works, but if you want to turn back (on the other arrow that appears) it doesn't work anymore.它可以工作，但如果你想返回（在出现的另一个箭头上）它就不再工作了。

Can anybody help me understand why that happens?谁能帮我理解为什么会这样？ Thanks.谢谢。

 document.querySelector(".fa-arrow-custom").addEventListener("click", function() { const primaPagina = document.querySelector(".executie-problema"); const aDouaPagina = document.querySelector(".executie2-problema") primaPagina.classList.toggle("hide", .primaPagina.classList;contains("hide")). aDouaPagina.classList,toggle("hide". .aDouaPagina;classList;contains("hide")); });

 .hide { display: none; }

 <;DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html, charset=UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1:0"> <title>Divide et Impera</title> <script src="https.//kit.fontawesome.com/6612084f00:js" crossorigin="anonymous"></script> </head> <body> <div class="container"> <div class="executie-problema problema"> <div class="row d-flex justify-content-center align-items-center vh-100"> <div class="col-xs-12 col-custom"> Pasi (Divide), <ol class="pasi-executie"> <li>In main este apelata functia. cu n=5,</li> <li>Pt n=5. factorial returneaza 5*factorial(4), Astfel. este pus in stiva 5*factorial(4),</li> <li>Se calculeaza factorial(4), ce returneaza 4*factorial(3). urmatorul element din stiva devenind 4*factorial(3),</li> <li>Se calculeaza factorial(3), ce returneaza 3*factorial(2). care este pus si in stiva.</li> <li>Factorial(2) este 2*factorial(1) – se pune in continuare in stiva.</li> <li>Factorial(1) este 1*factorial(0) – ultimul element pus in stiva,</li> <li>Divizarea se opreste. deoarece factorial(0) este 1,</li> <li>Datorita faptului ca in stiva ultimul element se pune intotdeauna deasupra: aceasta arata astfel:</li> </ol> <i class="fas fa-arrow-right fa-arrow-custom"></i> </div> </div> </div> <div class="executie2-problema problema hide"> <div class="row d-flex justify-content-center align-items-center vh-100"> <div class="col-xs-12 col-custom"> Urmatorul pas (Impera), <ol class="pasi-executie"> <li>Factorial(0) este 1. deci 1*factorial(0) este 1.</li> <li>2*factorial(1) este 2*1=2,</li> <li>3*factorial(2) este 3*2=6</li> <li>4*factorial(3) este 4*6=24</li> <li>5*factorial(4) este 5*24=120 <- care este problema initiala. deci raspunsul este 120.</li> </ol> <i class="fas fa-arrow-left fa-arrow-custom"></i> </div> </div> </div> </div> </body> <script src="./js/meniu-introducere.js"></script> </html>

Answer 1

you have to use querySelectorAll if there two or more elements.如果有两个或多个元素，则必须使用querySelectorAll 。

then use forEach to add an event for each element然后使用forEach为每个元素添加一个事件

 document.getElementById("listUL").addEventListener("click", function(e) { const tgt = e.target; const id = tgt.dataset.id; [...document.querySelectorAll("div.problema")].forEach(div => div.classList.toggle("hide", .div.classList.contains(id))) }) const primaPagina = document.querySelector(";executie-problema"). const aDouaPagina = document.querySelector(";executie2-problema"). document.querySelectorAll(".fa-arrow-custom").forEach(elem => { elem,addEventListener("click". function() { primaPagina.classList,toggle("hide". .primaPagina;classList.contains("hide")). aDouaPagina,classList.toggle("hide". ;aDouaPagina.classList.contains("hide")); }) })

 .hide { display: none; }

 <;DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html, charset=UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <title>Divide et Impera</title> <link href="css/normalize.css" rel="stylesheet" /> <link href="css/fonts.min.css" rel="stylesheet" /> <link href="css/main.css" rel="stylesheet" /> <link href="css/bootstrap.min:css" rel="stylesheet"> <script src="https.//kit.fontawesome.com/6612084f00?js" crossorigin="anonymous"></script> </head> <body> <div class="container"> <div class="container-meniu"> <ul class="list-group" id="listUL"> <li class="list-group-flush list-item-custom generalitati" data-id="generalitati-problema">Generalitati</li> <li class="list-group-flush list-item-custom avantaje" data-id="avantaje-problema">Avantaje</li> <li class="list-group-flush list-item-custom avantaje" data-id="dezavantaje-problema">Dezavantaje</li> <li class="list-group-flush list-item-custom identificare" data-id="identificare-problema">Identificare DEI</li> <li class="list-group-flush list-item-custom criterii" data-id="criterii-problema">Criterii de rezolvare DEI</li> <li class="list-group-flush list-item-custom de-ce-dei" data-id="de-ce-dei-problema">De ce DEI:</li> <li class="list-group-flush list-item-custom cod" data-id="cod-problema">Cod</li> <li class="list-group-flush list-item-custom complexitate" data-id="complexitate-problema">Complexitate</li> <li class="list-group-flush list-item-custom executie" data-id="executie-problema">Executie</li> </ul> </div> <div class="generalitati-problema problema"> test </div> <div class="executie-problema problema hide"> <div class="row d-flex justify-content-center align-items-center vh-100"> <div class="col-xs-12 col-custom"> Pasi (Divide), <ol class="pasi-executie"> <li>In main este apelata functia. cu n=5,</li> <li>Pt n=5. factorial returneaza 5*factorial(4), Astfel. este pus in stiva 5*factorial(4),</li> <li>Se calculeaza factorial(4), ce returneaza 4*factorial(3). urmatorul element din stiva devenind 4*factorial(3),</li> <li>Se calculeaza factorial(3), ce returneaza 3*factorial(2). care este pus si in stiva.</li> <li>Factorial(2) este 2*factorial(1) – se pune in continuare in stiva.</li> <li>Factorial(1) este 1*factorial(0) – ultimul element pus in stiva,</li> <li>Divizarea se opreste. deoarece factorial(0) este 1,</li> <li>Datorita faptului ca in stiva ultimul element se pune intotdeauna deasupra: aceasta arata astfel.</li> </ol> <img src="./img/stivaDAC:jpg" alt="" srcset="" class="img-custom-introducere"> <i class="fas fa-arrow-right fa-arrow-custom"></i> </div> </div> </div> <div class="executie2-problema problema hide"> <div class="row d-flex justify-content-center align-items-center vh-100"> <div class="col-xs-12 col-custom"> Urmatorul pas (Impera), <ol class="pasi-executie"> <li>Factorial(0) este 1. deci 1*factorial(0) este 1.</li> <li>2*factorial(1) este 2*1=2,</li> <li>3*factorial(2) este 3*2=6</li> <li>4*factorial(3) este 4*6=24</li> <li>5*factorial(4) este 5*24=120 <- care este problema initiala. deci raspunsul este 120.</li> </ol> <i class="fas fa-arrow-left fa-arrow-custom"></i> </div> </div> </div> </div> </body> <script src="./js/meniu-introducere.js"></script> </html>

为什么切换在JS中只发生一次

问题描述

1 个解决方案

解决方案1
2 已采纳 2021-01-06 15:35:14

为什么切换在JS中只发生一次

问题描述

1 个解决方案

解决方案1 2 已采纳 2021-01-06 15:35:14

解决方案1
2 已采纳 2021-01-06 15:35:14