Flipping over every single card, but only desire to flip them one at a time

Question

Flipping over every single card, but only desire to flip them one at a time

My attempt to flip these cards individually has resulted in them all flipping together.

I suspect there may be an error in my JavaScript code.

In the original code, I used images in front and an unordered list in the back, but here I have simplified it to just "Front" and "Back".

$(".flip").click(function() {
  $(".card").toggleClass("flipped");
});

.card-container {
  display: flex;
}
.card {
  width: 300px;
  height: 6rem;
  margin: 30px;
  transform-style: preserve-3d;
  transition: transform 1s;
}

.card figure {
  margin: 0;
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

.card figure figcaption {
  padding: 0 1rem;
  backface-visibility: hidden;
  border: 1px solid gray;
}

.card button.flip {
  position: absolute;
  right: 1rem;
  margin: 0;
}

.card button.flip {
  top: 1rem;
}

.card .back {
  transform: rotateY( 180deg);
}

.card.flipped {
  transform: rotateY( 180deg);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="card-container">
  <div class="card">
    <figure class="front">
      <figcaption>
        <h2>FRONT 1</h2>
        <button class="flip">+</button>
      </figcaption>
    </figure>
    <figure class="back">
      <figcaption>
        <h2>BACK 1</h2>
        <button class="flip">-</button>
      </figcaption>
    </figure>
  </div>

  <div class="card">
    <figure class="front">
      <figcaption>
        <h2>FRONT 2</h2>
        <button class="flip">+</button>
      </figcaption>
    </figure>
    <figure class="back">
      <figcaption>
        <h2>BACK 2</h2>
        <button class="flip">-</button>
      </figcaption>
    </figure>
  </div>
</div>

Could someone point out what could be going wrong here?

javascript html jquery css

Answer 1

Answer №1

There is a more efficient way to handle the flipping of elements with the class .card. Instead of toggling all elements, you can toggle only the one that contains the button by using the .closest() method, which moves upwards in the DOM tree until it finds the specified class.

$(this).closest(".card").toggleClass("flipped");

$(".flip").click(function() {
  $(this).closest(".card").toggleClass("flipped");
});

.card-container {
  display: flex;
}
.card {
  width: 300px;
  height: 6rem;
  margin: 30px;
  transform-style: preserve-3d;
  transition: transform 1s;
}

.card figure {
  margin: 0;
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

.card figure figcaption {
  padding: 0 1rem;
  backface-visibility: hidden;
  border: 1px solid gray;
}

.card button.flip {
  position: absolute;
  right: 1rem;
  margin: 0;
}

.card button.flip {
  top: 1rem;
}

.card .back {
  transform: rotateY(180deg);
}

.card.flipped {
  transform: rotateY(180deg);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="card-container">
  <div class="card">
    <figure class="front">
      <figcaption>
        <h2>FRONT 1</h2>
        <button class="flip">+</button>
      </figcaption>
    </figure>
    <figure class="back">
      <figcaption>
        <h2>BACK 1</h2>
        <button class="flip">-</button>
      </figcaption>
    </figure>
  </div>

  <div class="card">
    <figure class="front">
      <figcaption>
        <h2>FRONT 2</h2>
        <button class="flip">+</button>
      </figcaption>
    </figure>
    <figure class="back">
      <figcaption>
        <h2>BACK 2</h2>
        <button class="flip">-</button>
      </figcaption>
    </figure>
  </div>
</div>

Answer 2

There is a more efficient way to handle the flipping of elements with the class .card. Instead of toggling all elements, you can toggle only the one that contains the button by using the .closest() method, which moves upwards in the DOM tree until it finds the specified class.

$(this).closest(".card").toggleClass("flipped");

$(".flip").click(function() {
  $(this).closest(".card").toggleClass("flipped");
});

.card-container {
  display: flex;
}
.card {
  width: 300px;
  height: 6rem;
  margin: 30px;
  transform-style: preserve-3d;
  transition: transform 1s;
}

.card figure {
  margin: 0;
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

.card figure figcaption {
  padding: 0 1rem;
  backface-visibility: hidden;
  border: 1px solid gray;
}

.card button.flip {
  position: absolute;
  right: 1rem;
  margin: 0;
}

.card button.flip {
  top: 1rem;
}

.card .back {
  transform: rotateY(180deg);
}

.card.flipped {
  transform: rotateY(180deg);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="card-container">
  <div class="card">
    <figure class="front">
      <figcaption>
        <h2>FRONT 1</h2>
        <button class="flip">+</button>
      </figcaption>
    </figure>
    <figure class="back">
      <figcaption>
        <h2>BACK 1</h2>
        <button class="flip">-</button>
      </figcaption>
    </figure>
  </div>

  <div class="card">
    <figure class="front">
      <figcaption>
        <h2>FRONT 2</h2>
        <button class="flip">+</button>
      </figcaption>
    </figure>
    <figure class="back">
      <figcaption>
        <h2>BACK 2</h2>
        <button class="flip">-</button>
      </figcaption>
    </figure>
  </div>
</div>

Answer 3

Answer №2

$(".flip").click(function() {
  $(this).closest(".card").toggleClass("flipped");
});

.card-container {
  display: flex;
}
.card {
  width: 300px;
  height: 6rem;
  margin: 30px;
  transform-style: preserve-3d;
  transition: transform 1s;
}

.card figure {
  margin: 0;
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

.card figure figcaption {
  padding: 0 1rem;
  backface-visibility: hidden;
  border: 1px solid gray;
}

.card button.flip {
  position: absolute;
  right: 1rem;
  margin: 0;
}

.card button.flip {
  top: 1rem;
}

.card .back {
  transform: rotateY( 180deg);
}

.card.flipped {
  transform: rotateY( 180deg);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="card-container">
  <div class="card">
    <figure class="front">
      <figcaption>
        <h2>FRONT 1</h2>
        <button class="flip">+</button>
      </figcaption>
    </figure>
    <figure class="back">
      <figcaption>
        <h2>BACK 1</h2>
        <button class="flip">-</button>
      </figcaption>
    </figure>
  </div>

  <div class="card">
    <figure class="front">
      <figcaption>
        <h2>FRONT 2</h2>
        <button class="flip">+</button>
      </figcaption>
    </figure>
    <figure class="back">
      <figcaption>
        <h2>BACK 2</h2>
        <button class="flip">-</button>
      </figcaption>
    </figure>
  </div>
</div>

Answer 4

$(".flip").click(function() {
  $(this).closest(".card").toggleClass("flipped");
});

.card-container {
  display: flex;
}
.card {
  width: 300px;
  height: 6rem;
  margin: 30px;
  transform-style: preserve-3d;
  transition: transform 1s;
}

.card figure {
  margin: 0;
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

.card figure figcaption {
  padding: 0 1rem;
  backface-visibility: hidden;
  border: 1px solid gray;
}

.card button.flip {
  position: absolute;
  right: 1rem;
  margin: 0;
}

.card button.flip {
  top: 1rem;
}

.card .back {
  transform: rotateY( 180deg);
}

.card.flipped {
  transform: rotateY( 180deg);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="card-container">
  <div class="card">
    <figure class="front">
      <figcaption>
        <h2>FRONT 1</h2>
        <button class="flip">+</button>
      </figcaption>
    </figure>
    <figure class="back">
      <figcaption>
        <h2>BACK 1</h2>
        <button class="flip">-</button>
      </figcaption>
    </figure>
  </div>

  <div class="card">
    <figure class="front">
      <figcaption>
        <h2>FRONT 2</h2>
        <button class="flip">+</button>
      </figcaption>
    </figure>
    <figure class="back">
      <figcaption>
        <h2>BACK 2</h2>
        <button class="flip">-</button>
      </figcaption>
    </figure>
  </div>
</div>

Answer 5

Answer №3

To avoid flipping all the cards simultaneously, it is important to use unique IDs to distinguish between individual cards instead of simply relying on the .card class. By uniquely identifying each card, you can specify which cards should be flipped when the action is triggered.

Answer 6

To avoid flipping all the cards simultaneously, it is important to use unique IDs to distinguish between individual cards instead of simply relying on the .card class. By uniquely identifying each card, you can specify which cards should be flipped when the action is triggered.

Answer 7

Answer №4

const cardElement = document.querySelectorAll('.card');
for(let i = 0; i < cardElement.length; i++) {
  cardElement[i].addEventListener('click',function(){
    this.classList.add('flipped')
  })
}

.card-container {
  display: flex;
}
.card {
  width: 300px;
  height: 6rem;
  margin: 30px;
  transform-style: preserve-3d;
  transition: transform 1s;
}

.card figure {
  margin: 0;
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

.card figure figcaption {
  padding: 0 1rem;
  backface-visibility: hidden;
  border: 1px solid gray;
}

.card button.flip {
  position: absolute;
  right: 1rem;
  margin: 0;
}

.card button.flip {
  top: 1rem;
}

.card .back {
  transform: rotateY( 180deg);
}

.card.flipped {
  transform: rotateY( 180deg);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="card-container">
  <div class="card">
    <figure class="front">
      <figcaption>
        <h2>FRONT 1</h2>
        <button class="flip">+</button>
      </figcaption>
    </figure>
    <figure class="back">
      <figcaption>
        <h2>BACK 1</h2>
        <button class="flip">-</button>
      </figcaption>
    </figure>
  </div>

  <div class="card">
    <figure class="front">
      <figcaption>
        <h2>FRONT 2</h2>
        <button class="flip">+</button>
      </figcaption>
    </figure>
    <figure class="back">
      <figcaption>
        <h2>BACK 2</h2>
        <button class="flip">-</button>
      </figcaption>
    </figure>
  </div>
</div>

Perhaps a good approach would be to retrieve all elements with the class card first and then iterate over them. Below is an example in plain javascript:

const cardElement = document.querySelectorAll('.card');

Then iterate over the elements using a loop:

for(let i = 0; i < cardElement.length; i++) {
  cardElement[i].addEventListener('click',function(){
    this.classList.add('flipped')
  })
}

You can experiment with toggling the flipped class to achieve desired effects.

Answer 8

const cardElement = document.querySelectorAll('.card');
for(let i = 0; i < cardElement.length; i++) {
  cardElement[i].addEventListener('click',function(){
    this.classList.add('flipped')
  })
}

.card-container {
  display: flex;
}
.card {
  width: 300px;
  height: 6rem;
  margin: 30px;
  transform-style: preserve-3d;
  transition: transform 1s;
}

.card figure {
  margin: 0;
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

.card figure figcaption {
  padding: 0 1rem;
  backface-visibility: hidden;
  border: 1px solid gray;
}

.card button.flip {
  position: absolute;
  right: 1rem;
  margin: 0;
}

.card button.flip {
  top: 1rem;
}

.card .back {
  transform: rotateY( 180deg);
}

.card.flipped {
  transform: rotateY( 180deg);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="card-container">
  <div class="card">
    <figure class="front">
      <figcaption>
        <h2>FRONT 1</h2>
        <button class="flip">+</button>
      </figcaption>
    </figure>
    <figure class="back">
      <figcaption>
        <h2>BACK 1</h2>
        <button class="flip">-</button>
      </figcaption>
    </figure>
  </div>

  <div class="card">
    <figure class="front">
      <figcaption>
        <h2>FRONT 2</h2>
        <button class="flip">+</button>
      </figcaption>
    </figure>
    <figure class="back">
      <figcaption>
        <h2>BACK 2</h2>
        <button class="flip">-</button>
      </figcaption>
    </figure>
  </div>
</div>

Perhaps a good approach would be to retrieve all elements with the class card first and then iterate over them. Below is an example in plain javascript:

const cardElement = document.querySelectorAll('.card');

Then iterate over the elements using a loop:

for(let i = 0; i < cardElement.length; i++) {
  cardElement[i].addEventListener('click',function(){
    this.classList.add('flipped')
  })
}

You can experiment with toggling the flipped class to achieve desired effects.

Answer 9

Answer №5

In response to your previous inquiry about learning jQuery and/or React, I initially tried to address it in a comment but found myself running out of space. Thus, I opted to transform my lengthy comment into a separate answer.

There were originally two main reasons for utilizing jQuery, both of which are now outdated.

The first reason pertained to browser compatibility, particularly with IE. In the past, we had to cater to two types of browsers: IE and all others. IE posed unique challenges that necessitated separate handling. However, with the demise of IE by Microsoft, this reason is no longer relevant.

Fun fact: The disparity in IE was not due to Microsoft's programming capabilities, but rather an attempt by the company to compete in a realm (the Internet) where free software products dominated. By introducing a browser (IE) bundled with Windows, Microsoft sought to ensure compatibility with their webserver (IIS). This strategy ensured optimal performance only with IIS, compelling entities like banks and multinationals to invest in Microsoft solutions to avoid website display issues on the most widely used browser.

The second reason for adopting jQuery was to simplify javascript operations with functions like $.each(), $.ajax(), and .on(), which were more user-friendly than native javascript. However, advancements in "modern javascript" like es6 have bridged this gap, rendering jQuery less essential. Therefore, mastering javascript should be a primary focus alongside jQuery knowledge.

Despite its continued prevalence on approximately 70% of websites and integration with libraries like Bootstrap, understanding native javascript takes precedence. While jQuery remains useful, learning modern javascript is vital. Check out these resources demonstrating the transition from jQuery to newer javascript methodologies.

Streamlined element selection in pure JS

Pure JS alternative to jQuery remove()

Regarding learning React:

The decision to delve into React hinges on your objectives. For career prospects, knowledge of React, Angular, or Vue.js is beneficial. However, for those focused on creating innovative web functionality, proficiency in javascript, graphing libraries (D3.js, Dash-Plotly), Python for scientific/mathematical contexts, and PHP for robust backend development is crucial. Remember, even Facebook transitioned to their proprietary system (React) from PHP and MySQL relatively recently.

For additional insights on learning React, refer to this informative post:

React site displaying blank page on GitHub Pages

Answer 10

In response to your previous inquiry about learning jQuery and/or React, I initially tried to address it in a comment but found myself running out of space. Thus, I opted to transform my lengthy comment into a separate answer.

There were originally two main reasons for utilizing jQuery, both of which are now outdated.

The first reason pertained to browser compatibility, particularly with IE. In the past, we had to cater to two types of browsers: IE and all others. IE posed unique challenges that necessitated separate handling. However, with the demise of IE by Microsoft, this reason is no longer relevant.

Fun fact: The disparity in IE was not due to Microsoft's programming capabilities, but rather an attempt by the company to compete in a realm (the Internet) where free software products dominated. By introducing a browser (IE) bundled with Windows, Microsoft sought to ensure compatibility with their webserver (IIS). This strategy ensured optimal performance only with IIS, compelling entities like banks and multinationals to invest in Microsoft solutions to avoid website display issues on the most widely used browser.

The second reason for adopting jQuery was to simplify javascript operations with functions like $.each(), $.ajax(), and .on(), which were more user-friendly than native javascript. However, advancements in "modern javascript" like es6 have bridged this gap, rendering jQuery less essential. Therefore, mastering javascript should be a primary focus alongside jQuery knowledge.

Despite its continued prevalence on approximately 70% of websites and integration with libraries like Bootstrap, understanding native javascript takes precedence. While jQuery remains useful, learning modern javascript is vital. Check out these resources demonstrating the transition from jQuery to newer javascript methodologies.

Streamlined element selection in pure JS

Pure JS alternative to jQuery remove()

Regarding learning React:

The decision to delve into React hinges on your objectives. For career prospects, knowledge of React, Angular, or Vue.js is beneficial. However, for those focused on creating innovative web functionality, proficiency in javascript, graphing libraries (D3.js, Dash-Plotly), Python for scientific/mathematical contexts, and PHP for robust backend development is crucial. Remember, even Facebook transitioned to their proprietary system (React) from PHP and MySQL relatively recently.

For additional insights on learning React, refer to this informative post:

React site displaying blank page on GitHub Pages

Flipping over every single card, but only desire to flip them one at a time

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

What are the steps to displaying Jade in an Electron application?

Creating a personalized mouse cursor using HTML

Collaborate on global functions across the Quasar ecosystem and beyond, including Vue3

What is the best way to display converted value in Angular 8?

Implementing function invocation upon scroll bar click

Revamping the design of a menu bar in WordPress

Notification with jQuery

What is the best way to include an Interval in a button element?

localization within vue component

Leveraging Angular to incorporate HTML templates from one component into another component

I am experiencing issues with staying logged in while using Passport and sessions. The function "isAuthenticated()" from Passport continuously returns false, causing me to not remain logged in

How to position a static element using CSS

Arrangement of HTML divs and styling classes

The Facebook JavaScript API function FB.api() is limited to posting messages and does not support media attachments

Can we expect every bullet point to be consistently indented at precisely 1.8em?

Guide on generating a dynamic table by looping through an array and placing values inside <tr> tags, then saving it in a variable

Issue: Unable to locate file 'socket.io-client/dist/socket.io.min.js'

Determine the height of the input group when a span, input, and button are included

What are the steps to send $http requests from AngularJS to a local server in an app?

Discovering the offset location using touchmove