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

屋大维尼古拉斯库

就像标题所说的，我需要在某些按钮上切换一个类，我真的不只一次地了解如何做。问题出在第二个代码块（一个带有document.querySelector），而不是另一个。

另一个在那里，因为它用于导航，并且必须在那里。

如果单击“执行”，则文本将更改。在它下面，将有一个箭头来更改文本。它可以工作，但是如果您想回头（在出现的另一个箭头上），它将不再起作用。

有人可以帮助我了解为什么会这样吗？谢谢。

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>

君

querySelectorAll如果有两个或多个元素，则必须使用。

然后用于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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。