为什么我的 JavaScript/HTML 代码不起作用？

Question

我用 HTML 制作了一个代码片段，并为我制作的每个类编写了 CSS。我尝试重新创建https://youtu.be/T76bbMVMX6M?si=QFm9EF2rV4cZsE1j中显示的效果。

我尝试更改 div 和按钮元素的 ID，但它根本没有响应。我希望这三个 div 能够一一翻译并显示每个 div，但按钮根本没有响应。

var c1 = document.getElementById("c1");
var c2 = document.getElementById("c2");
var c3 = document.getElementById("c3");

var next1 = document.getElementById("next1");
var next2 = document.getElementById("next2");
var back1 = document.getElementById("back1");
var back2 = document.getElementById("back2");


next1.onclick = function() {
  c1.style.left = "-4500px";
  c2.style.left = "0px"
}
back1.onclick = function() {
  c1.style.left = "0px";
  c2.style.left = "4500px";
}
next2.onclick = function() {
  c2.style.left = "-4500px";
  c3.style.left = "0px"
}
back2.onclick = function() {
  c2.style.left = "0px";
  c3.style.left = "4500px"
}

.choice {
  width: 100%;
  height: fit-content;
  margin: 20px 135px;
  padding: 30px;
  position: absolute;
}

.contain {
  width: 100%;
  height: 500px;
  position: relative;
}

.types {
  width: 60%;
  height: fit-content;
  margin: 10px 0px;
  opacity: 1;
  transition: opacity 200ms ease-in-out 0ms;
}

.types:active {
  opacity: 1;
}

h3 {
  font-size: 30px;
  color: #4056a1;
  text-decoration: underline;
}

.options {
  display: flex;
  padding-top: 30px;
}

.option {
  position: relative;
  width: 300px;
  min-width: 50px;
  height: 400px;
  min-height: 100px;
  margin: 40px 40px 40px 0px;
  border-radius: 50px;
  overflow: hidden;
  transition: transform 0.1s ease-in-out 10ms;
}

.option:hover {
  transform: scale(1.1);
}

.Heading3 {
  font-weight: bold;
  font-size: 40px;
  margin: 15px 0px 5px 0px;
  text-transform: uppercase;
  color: rgb(239, 226, 186);
  animation: bluee 1s ease-out 0.3s forwards;
}

.triangle {
  width: 0;
  height: 0;
  border-left: 0px solid transparent;
  border-right: 200px solid transparent;
  border-top: 150px solid rgb(64, 86, 161);
  ;
  position: absolute;
  margin-left: 0px;
  border-radius: 15px 0px 0px 0px;
}

.c1 {
  transition: 0.5s;
}

.c2 {
  padding-top: 85px;
  left: 4500px;
  transition: 0.5s;
}

.c3 {
  padding-top: 85px;
  left: 4500px;
  transition: 0.5s;
}

.o1 {
  background-image: url(images/abhishek-sarkate-xH43OxDSXYw-unsplash.jpg);
  background-position: center;
  background-size: cover;
}

.o2 {
  background-image: url(images/Screenshot\ 2024-02-02\ 195326.jpg);
  background-position: center;
  background-size: cover;
}

.o3 {
  background-image: url(images/FDNJIuqVEAM2H43.jpeg);
  background-position: center;
  background-size: cover;
}

h4 {
  position: absolute;
  bottom: 10px;
  right: 15px;
  text-decoration: none;
  font-size: 40px;
  font-style: italic;
  color: #ffaf1c;
}

.sym {
  position: absolute;
  top: 5px;
  left: 25px;
}

.sym1 {
  width: 75px;
}

.sym2 {
  position: relative;
  top: 10px;
  left: 10px;
  width: 60px;
}

.submitt {
  width: 300px;
  min-width: 50px;
  height: 400px;
  min-height: 100px;
  margin: 40px 40px 40px 0px;
  border-radius: 50px;
  background-color: rgba(255, 255, 255, 0);
  border: solid #1a79ca;
  border-radius: 50px;
  transform: translateY(-40px);
}

.btn-box {
  width: 100%;
  margin: 30px auto;
  text-align: center;
  transform: translateX(-60px);
}

.btn-box button {
  width: 200px;
  height: 45px;
  margin: 0 10px;
  background-color: #182b3a;
  background-image: linear-gradient(315deg, #182b3a 0%, #20a4f3 74%);
  border-radius: 36px;
  border-color: #ffaf1c;
  border: solid;
  outline: none;
  color: #ffaf1c;
  cursor: pointer;
  font-size: medium;
  transition: 0.5s;
}

.btn-box button:hover {
  transform: scale(1.05);
}

<div class="contain">
  <div class="choice c1" id="c1">
    <h2 class="Heading3">Enter preferences</h2>
    <div class="types">
      <h3> Select a city:</h3>
      <div class="options">
        <div class="option o1">
          <div class="triangle"></div>
          <button class="submitt" type="submit" id="getcity"></button>
          <div class="sym"><img src="images/Mumbai.svg" class="sym1"></div>
          <h4>Mumbai</h4>
        </div>
        <div class="option o2">
          <div class="triangle"></div>
          <button class="submitt" type="submit" id="getcity"></button>
          <div class="sym"><img src="images/Untitled (3).svg" class="sym2"></div>
          <h4>Thane</h4>
        </div>
        <div class="option o3">
          <div class="triangle"></div>
          <button class="submitt" type="submit" id="getcity"></button>
          <div class="sym"><img src="images/Untitled (4).svg" class="sym2"></div>
          <h4>Dombivli</h4>
        </div>
      </div>
      <div class="btn-box">
        <button type="button" id="next1">Next</button>
      </div>
    </div>
  </div>


  <div class="choice c2" id="c2">
    <div class="types">
      <h3> Select a city:</h3>
      <div class="options">
        <div class="option o1">
          <div class="triangle"></div>
          <div class="sym"><img src="images/Mumbai.svg" class="sym1"></div>
          <h4>Mumbai</h4>
        </div>
        <div class="option o2">
          <div class="triangle"></div>
          <h4>Thane</h4>
        </div>
        <div class="option o3">
          <div class="triangle"></div>
          <img>
          <h4>Dombivli</h4>
        </div>
      </div>
      <div class="btn-box">
        <button type="button" id="back1">Back</button>
        <button type="button" id="next2">Next</button>
      </div>
    </div>
  </div>


  <div class="choice c3" id="c3">
    <div class="types">
      <h3> Select a city:</h3>
      <div class="options">
        <div class="option o1">
          <div class="triangle"></div>
          <div class="sym"><img src="images/Mumbai.svg" class="sym1"></div>
          <h4>Mumbai</h4>
        </div>
        <div class="option o2">
          <div class="triangle"></div>
          <h4>Thane</h4>
        </div>
        <div class="option o3">
          <div class="triangle"></div>
          <img>
          <h4>Dombivli</h4>
        </div>
      </div>
      <div class="btn-box">
        <button type="button" id="back2">Back</button>
        <button type="Submit">Submit</button>
      </div>
    </div>
  </div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="script.js"></script>

Answer 1

让我们使用委托和类来代替 ID

我们可以使用数组和脚本生成卡片，但现在我对它们进行硬编码

document.addEventListener("DOMContentLoaded", () => {
  const container = document.querySelector('.contain');
  const cards = container.querySelectorAll('.choice');
  let currentCard = 1; // Start with the first card
  const slideCard = (from, to) => {
    const leavingCard = cards[from - 1]; // Adjust index to be zero-based
    const enteringCard = cards[to - 1]; // Adjust index to be zero-based
    // Slide out the leaving card and slide in the entering card
    leavingCard.style.left = from < to ? "-4500px" : "4500px";
    enteringCard.style.left = "0px";
  };

  container.addEventListener('click', (e) => {
    const tgt = e.target.closest('button');
    if (!tgt) return; // Not a button
    if (tgt.matches('.next-btn') || tgt.matches('.back-btn')) { // Either next or back
      const targetCard = +tgt.dataset.target;
      slideCard(currentCard, targetCard);
      currentCard = targetCard; // Update the current card
    }
  });
});

.contain {
  width: 100%;
  max-width: 800px; /* Adjust to fit your design */
  height: 500px; /* Adjust based on content */
  position: relative;
  overflow: hidden;
  margin: 20px auto;
}

.choice {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 100%; /* Start off-screen */
  transition: left 0.5s ease-in-out;
}

.card[data-card="1"] {
  left: 0; /* First card is visible */
}

/* Additional styles for .options, .option, etc., as provided initially */

.btn-box {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
}


.btn-box button {
  cursor: pointer;
  width: 200px;
  height: 45px;
  margin: 0 10px;
  background-color: #182b3a;
  background-image: linear-gradient(315deg, #182b3a 0%, #20a4f3 74%);
  border-radius: 36px;
  border-color: #ffaf1c;
  border: solid;
  outline: none;
  color: #ffaf1c;
  cursor: pointer;
  font-size: medium;
  transition: 0.5s;
}

.btn-box button:hover {
  transform: scale(1.05);
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>City Selector</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

<div class="contain">
    <div class="choice card" data-card="1">
        <h2 class="Heading3">Enter preferences</h2>
        <div class="types">
            <h3>Select a city:</h3>
            <div class="options">
                <!-- City options for Card 1 -->
                <div class="option o1" style="background-image: url('images/Mumbai.svg');">
                    <h4>Mumbai</h4>
                </div>
                <div class="option o2" style="background-image: url('images/Untitled (3).svg');">
                    <h4>Thane</h4>
                </div>
                <div class="option o3" style="background-image: url('images/Untitled (4).svg');">
                    <h4>Dombivli</h4>
                </div>
            </div>
            <div class="btn-box">
                <button type="button" class="next-btn" data-target="2">Next</button>
            </div>
        </div>
    </div>
    <div class="choice card" data-card="2">
        <h2 class="Heading3">Enter preferences</h2>
        <div class="types">
            <h3>Select a Fruit:</h3>
            <div class="options">
                <!-- Fruit options for Card 2 -->
                <div class="option o1" style="background-image: url('images/apple.svg');">
                    <h4>Apple</h4>
                </div>
                <div class="option o2" style="background-image: url('images/banana.svg');">
                    <h4>Banana</h4>
                </div>
                <div class="option o3" style="background-image: url('images/pear.svg');">
                    <h4>Pear</h4>
                </div>
            </div>
            <div class="btn-box">
                <button type="button" class="back-btn" data-target="1">Back</button>
                <button type="button" class="next-btn" data-target="3">Next</button>
            </div>
        </div>
    </div>
    <div class="choice card" data-card="3">
        <h2 class="Heading3">Enter preferences</h2>
        <div class="types">
            <h3>Select a colour:</h3>
            <div class="options">
                <!-- Colour options for Card 3 -->
                <div class="option o1" style="background-image: url('images/red.svg');">
                    <h4>Red</h4>
                </div>
                <div class="option o2" style="background-image: url('images/blue.svg');">
                    <h4>Blue</h4>
                </div>
                <div class="option o3" style="background-image: url('images/green.svg');">
                    <h4>Green</h4>
                </div>
            </div>
            <div class="btn-box">
                <button type="button" class="next-btn" data-target="2">Back</button>
            </div>
        </div>
    </div>

    <!-- Ensure each .card has a unique `data-card` and each button has the correct `data-target` -->
</div>

<script src="script.js"></script>

</body>
</html>