HTML+CSS+JS item.classList.toggle() не работает

Я пишу программу, стремящуюся перевернуть карту, когда она нажата. Код javascript выглядит так:

/* card flipping onclick */
import "./Stylesheets/FlipCardStyle.css"

var cards = document.querySelectorAll('.card');

[...cards].forEach((card)=>{
    card.addEventListener( 'click', function() {
        card.classList.toggle('flipped');
    });
});

И код CSS работает так:

@import "GridLayouts.css";

.card {
    background: transparent;
    width: 117px;
    height: 200px;
    perspective: 1000px; /* Remove this if you don't want the 3D effect */
    position: relative;
    cursor: pointer;
    text-align: center;
    transition: transform 0.8s;
    transform-style: preserve-3d;
}

.wrapper-horizontal .card {
    float: left;
    margin-right: -47px;
    margin-bottom: 20px;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.card:hover {
    transform: rotateY(180deg) translate(0, 40px);
}

/* Position the front and back side */
.card-face {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden; /* Safari */
    backface-visibility: hidden;
}

/* Style the front side (fallback if image is missing) */
.card-face-front {
    background: url("...") -234px 0px;
}

/* Style the back side */
.card-face-back {
    background: url("...");
    background-size: 100% 100%;
    transform: rotateY(180deg);
}

HTML-код выглядит следующим образом:

<!DOCTYPE html>

<link rel = "stylesheet" href = "Stylesheets/FlipCardStyle.css">
<link rel = "stylesheet" href = "Stylesheets/GridLayouts.css">
<link rel = "stylesheet" href = "Stylesheets/Buttons.css">

<html>

<div class = "wrapper-horizontal">

    <div class = "card">
        <div class = "card-face card-face-front"></div>
        <div class = "card-face card-face-back"></div>
    </div>

    <div class = "card">
        <div class = "card-face card-face-front"></div>
        <div class = "card-face card-face-back"></div>
    </div>

    <div class = "card">
        <div class = "card-face card-face-front"></div>
        <div class = "card-face card-face-back"></div>
    </div>

    <div class = "card">
        <div class = "card-face card-face-front"></div>
        <div class = "card-face card-face-back"></div>
    </div>

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

</div>

<button class = "btn">Shuffle</button>

</html>

Теоретически, когда я щелкнул карту, js-скрипт вызовет .card.flipped, который перевернет карту. Но это не работает... Моя логика кода взята из https://codepen.io/mondal10/pen/WNNEvjV, на codepen работает, но у меня не работает.

Кто-нибудь может мне помочь? Большое спасибо!!!

Ваша структура html не имеет никакого смысла

— 21.11.2022 10:22

Привет! Пожалуйста, сократите код в вопросе до исполняемого минимального воспроизводимого примера с помощью фрагментов стека (кнопка [<>] на панели инструментов); вот как это сделать.

— 21.11.2022 10:24

Для .card.flipped нет стиля.

— 21.11.2022 10:26

Это ваш настоящий html - если да, то он полностью недействителен.

— 21.11.2022 10:40

Я опубликовал фрагмент, где ваш код будет работать. Однако убедитесь, что в следующий раз, когда вы публикуете вопрос, вы создаете минимальный воспроизводимый пример, как сказал TJ Crowder, а также убедитесь, что вы пишете свой код с использованием допустимого HTML.

— 21.11.2022 10:48

javascript html css frontend card

21.11.2022 10:18

Как использовать API парсинга квитанций с помощью JavaScript за 5 минут?

В этом руководстве вы узнаете, как использовать API парсинга квитанций за 5 минут с помощью JavaScript. Eden AI предоставляет простой и удобный для...

Хук useOnClickOutside в ReactJS

Как разработчик ReactJS, вы, возможно, сталкивались с ситуацией, когда вам нужно закрыть модальное или выпадающее меню, когда кто-то щелкает за его...

Хуки (часть-2) - useEffect

Хук useEffect - один из самых мощных и универсальных инструментов в арсенале разработчика React. Он позволяет вам управлять побочными эффектами в...

Простое руководство по тестированию взаимодействия с пользователем с помощью библиотеки тестирования React

В предыдущем посте я показал вам на примерах, как писать базовые тесты в React. Важнейшей частью пользовательского интерфейса приложений является...

Как конвертировать HTML в PDF с помощью jsPDF

В этой статье мы рассмотрим, как конвертировать HTML в PDF с помощью jsPDF. Здесь мы узнаем, как конвертировать HTML в PDF с помощью javascript.

Создайте титры как в звездных войнах с помощью CSS и Javascript

Если вы веб-разработчик (или хотите им стать), то вы наверняка гик и вам нравятся "Звездные войны". А как бы вы хотели, чтобы фоном для вашего...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Текущий включенный HTML-код недействителен, и у вас есть селектор CSS, который переворачивает карты при наведении курсора, я изменил .card:hover на .flipped, потому что не было класса flipped, который можно было бы переключать с помощью JavaScript. И я удалил неверный HTML-код, а также заменил фоновые изображения, которые ни на что не ссылались, на цвета, поэтому в следующем фрагменте отображаются карточки.

var cards = document.querySelectorAll('.card');

[...cards].forEach((card) => {
  card.addEventListener('click', function() {
    card.classList.toggle('flipped');
  });
});

.card {
  background: transparent;
  width: 117px;
  height: 200px;
  perspective: 1000px;
  position: relative;
  cursor: pointer;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

.wrapper-horizontal .card {
  float: left;
  margin: 10px;
  margin-bottom: 20px;
}


/* changed .card:hover to .flipped because there was no class to be toggled. */

.flipped {
  transform: rotateY(180deg) translate(0, 40px);
}

.card-face {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  /* Safari */
  backface-visibility: hidden;
}

.card-face-front {
  background: red;
}

.card-face-back {
  background: blue;
  transform: rotateY(180deg);
}

<div class = "wrapper-horizontal">
  <div class = "card">
    <div class = "card-face card-face-front"></div>
    <div class = "card-face card-face-back"></div>
  </div>
  <div class = "card">
    <div class = "card-face card-face-front"></div>
    <div class = "card-face card-face-back"></div>
  </div>
  <div class = "card">
    <div class = "card-face card-face-front"></div>
    <div class = "card-face card-face-back"></div>
  </div>

  <div class = "card">
    <div class = "card-face card-face-front"></div>
    <div class = "card-face card-face-back"></div>
  </div>
  <script src = "./FlipCard.js"></script>
</div>
<button class = "btn">Shuffle</button>

Спасибо! Интересно, как я могу запустить его локально на хроме, потому что он, кажется, в порядке на сниппете, но всякий раз, когда я копирую код и запускаю его в хроме, он терпит неудачу. Я добавил ссылки css и js в файлы html, и мой Chrome поддерживает js...

— 21.11.2022 13:51

Здесь вы можете найти index.html, style.css и script.js github.com/REFUZIION/flipping-cards

— 21.11.2022 13:56

Если этот ответ дал вам решение, обязательно отметьте его как ответ, чтобы другие люди, столкнувшиеся с теми же проблемами, что и вы, смогли найти ответ.

— 21.11.2022 14:14

Оно работает! Огромные признательности

— 21.11.2022 23:51

21.11.2022 10:47

Возможно, вы копируете весь исходный код из codepen, не зная формата и структуры кода.

var cards = document.querySelectorAll('.card');

[...cards].forEach((card) => {
  card.addEventListener('click', function() {
    card.classList.toggle('is-flipped');
  });
});

body {
  font-family: sans-serif;
}

.scene {
  display: inline-block;
  width: 200px;
  height: 260px;
  /*   border: 1px solid #CCC; */
  margin: 40px 0;
  perspective: 600px;
}

.card {
  position: relative;
  width: 100%;
  height: 100%;
  cursor: pointer;
  transform-style: preserve-3d;
  transform-origin: center right;
  transition: transform 1s;
}

.card.is-flipped {
  transform: translateX(-100%) rotateY(-180deg);
}

.card__face {
  position: absolute;
  width: 100%;
  height: 100%;
  line-height: 260px;
  color: white;
  text-align: center;
  font-weight: bold;
  font-size: 40px;
  backface-visibility: hidden;
}

.card__face--front {
  background: crimson;
}

.card__face--back {
  background: slateblue;
  transform: rotateY(180deg);
}

<!doctype html>
<html class = "no-js" lang = "">

<head>
  <meta charset = "utf-8">
  <title></title>
  <meta name = "description" content = "">
  <meta name = "viewport" content = "width=device-width, initial-scale=1">

  <meta property = "og:title" content = "">
  <meta property = "og:type" content = "">
  <meta property = "og:url" content = "">
  <meta property = "og:image" content = "">

  <link rel = "manifest" href = "site.webmanifest">
  <link rel = "apple-touch-icon" href = "icon.png">
  <!-- Place favicon.ico in the root directory -->

  <link rel = "stylesheet" href = "css/normalize.css">
  <link rel = "stylesheet" href = "css/main.css">

  <meta name = "theme-color" content = "#fafafa">
</head>

<body>

  <!-- Add your site or application content here -->
  <div class = "scene scene--card">
    <div class = "card">
      <div class = "card__face card__face--front">front</div>
      <div class = "card__face card__face--back">back</div>
    </div>
  </div>
  <div class = "scene scene--card">
    <div class = "card">
      <div class = "card__face card__face--front">front</div>
      <div class = "card__face card__face--back">back</div>
    </div>
  </div>
  <p>Click card to flip.</p>

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


</body>

</html>

21.11.2022 11:32

Другие вопросы по теме

Добавить svg по существующему пути

Мой html не связан с моим css на chrome os

Как я могу заставить события действий работать со строками шаблона

Добавьте непрозрачность и переход к фоновому изображению и div

Как мне сложить числа на костях вместе для рекорда + провал

Как получить значение из [object Object] при изменении события

Перебор всей таблицы создает проблему с отображением нескольких значений для одного элемента.

Отображение видео с использованием WebRTC в javascript

Создайте текстовый отчет с помощью JavaScript и HTML

Добавить div внутри другого div с наибольшим числом внутри

HTML+CSS+JS item.classList.toggle() не работает

Ответы 2

Другие вопросы по теме

Похожие вопросы