0

Tengo 4 tarjetas (coloco ejemplo con 2) y cada tarjeta tiene un botón. La cosa es que al hacer click en cualquier botón se dan vuelta las 4 tarjetas en simultaneo. Yo quisiera que cada botón gire su tarjeta correspondiente. Imagino que debo solucionarlo usando this, pero no se como referenciarlo en este caso. Alguna sugerencia?

Entiendo que dentro de la función, la palabra this estaría referenciando a .okreni, yo quisiera saber como referenciar a la .uk-card puntual con la que el usuario interactúa

$('.okreni').on('click', function() {
  $('.uk-card').toggleClass('flipped');
});
/* CARDS ROTATE */

.okreni {
  cursor: pointer;
  padding: 20px;
}

.uk-card {
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transition: -webkit-transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition: -webkit-transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275), -webkit-transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  border-radius: 3px;
  border: #fd6ca3 solid 2px;
  box-shadow: 8px 10px rgba(253, 108, 163, 0.5);
  border-radius: 3px;
}

.uk-card .card-face.back {
  display: none;
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
}

.uk-card .card-face {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  display: none;
  background: #fff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: box;
  display: flex;
  -webkit-box-pack: center;
  -o-box-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -o-box-align: center;
  align-items: center;
  -webkit-font-smoothing: antialiased;
}

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

.flipped .back {
  display: block !important;
}

.flipped .front {
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- UIkit JS -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/uikit.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/uikit-icons.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/uikit.min.css" rel="stylesheet" />
<!-- Column -->
<div class="uk-card uk-card-default uk-card-body uk-width-1-5@m mr-4">
  <div class="front card-face uk-flex uk-flex-column">
    <h6><span class="icon-gold margin-right-10px" data-uk-icon="icon: code; ratio: 1"></span> Card 1.</h6>
  </div>
  <span class=" uk-position-top-right okreni" uk-icon="reply"></span>
  <div class="back card-face">
    <p class="uk-text-center">Hola
    </p>
  </div>
</div>

<!-- End Column -->
<!-- Column -->
<div class="uk-card uk-card-default uk-card-body uk-width-1-5@m mr-4">
  <div class="front card-face uk-flex uk-flex-column">
    <h6><span class="icon-gold margin-right-10px" data-uk-icon="icon: social; ratio: 1"></span> Card 2.</h6>

  </div>
  <span class=" uk-position-top-right okreni" uk-icon="reply"></span>
  <div class="back card-face">
    <p class="uk-text-center">Chau
    </p>
  </div>
</div>

1
  • Bueno, originalmente solo habia puesto el script pero algun usuario que ahora borró el comentario me pidio html y css, asi que ahi hay un ejemplo de lo que sucede. De todas maneras creo que con el script js solamente alcanzaba
    – Agustin G.
    el 30 abr. 2020 a las 20:49

1 respuesta 1

1

Como los elementos .okreni son hijos de elementos .uk-card puedes aprovechar esto para, como propusiste, efectivamente usar this en

$(this).parent().toggleClass('flipped');

De otro modo estarías haciendo referencia a todos los .uk-card existentes, por eso es que se dan vuelta ambos.

$('.okreni').on('click', function() {
  $(this).parent().toggleClass('flipped');
});
/* CARDS ROTATE */

.okreni {
  cursor: pointer;
  padding: 20px;
}

.uk-card {
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  //-webkit-transition: -webkit-transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  //transition: -webkit-transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  //transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275), -webkit-transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  border-radius: 3px;
  border: #fd6ca3 solid 2px;
  box-shadow: 8px 10px rgba(253, 108, 163, 0.5);
  border-radius: 3px;
}

.uk-card .card-face.back {
  display: none;
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
}

.uk-card .card-face {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  display: none;
  background: #fff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: box;
  display: flex;
  -webkit-box-pack: center;
  -o-box-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -o-box-align: center;
  align-items: center;
  -webkit-font-smoothing: antialiased;
}

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

.flipped .back {
  display: block !important;
}

.flipped .front {
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- UIkit JS -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/uikit.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/uikit-icons.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/uikit.min.css" rel="stylesheet" />
<!-- Column -->
<div class="uk-card uk-card-default uk-card-body uk-width-1-5@m mr-4">
  <div class="front card-face uk-flex uk-flex-column">
    <h6><span class="icon-gold margin-right-10px" data-uk-icon="icon: code; ratio: 1"></span> Card 1.</h6>
  </div>
  <span class=" uk-position-top-right okreni" uk-icon="reply"></span>
  <div class="back card-face">
    <p class="uk-text-center">Hola
    </p>
  </div>
</div>

<!-- End Column -->
<!-- Column -->
<div class="uk-card uk-card-default uk-card-body uk-width-1-5@m mr-4">
  <div class="front card-face uk-flex uk-flex-column">
    <h6><span class="icon-gold margin-right-10px" data-uk-icon="icon: social; ratio: 1"></span> Card 2.</h6>

  </div>
  <span class=" uk-position-top-right okreni" uk-icon="reply"></span>
  <div class="back card-face">
    <p class="uk-text-center">Chau
    </p>
  </div>
</div>

1
  • Me faltaba el .parent(), muchas gracias
    – Agustin G.
    el 30 abr. 2020 a las 22:09

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.