1

Estoy realizando una página para un grupo. En una sección de la página, se muestra a las personas que lo conforman. Usé una especie de tarjeta de perfil que funciona con CSS3 y jQuery.

El problema que tengo es que al mostrar la información de la persona, se abren la de todos. Lo que necesito, es que se muestre la información sólo de la persona seleccionada.

$(document).ready(function(e) {

  $(".view").click(function(e) {

    $(".dettales_perfil").addClass('activado');

  });

  $(".cerrar_perfil").click(function(e) {

    $(".dettales_perfil").removeClass('activado');

  });

});
.profile {
  position: relative;
  width: 300px;
  height: 450px;
  background-color: #FFFFFF;
  box-sizing: border-box;
  border: 1px solid #D3D3D3;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 20px 20px rgba(0, 0, 0, .2);
}

.profile img {
  max-width: 100%;
}

.profile .view {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  padding: 5px 10px;
  background-color: #59B548;
  color: #FFFFFF;
  border-radius: 15px;
  text-transform: uppercase;
  text-decoration: none;
  font-weight: bold;
  font-size: 12px;
}

.dettales_perfil {
  height: 50%;
  width: 100%;
  background-color: #FFFFFF;
  position: absolute;
  bottom: 30px;
  text-align: center;
  padding: 20px;
  box-sizing: border-box;
  transition: .5s;
  transform-origin: bottom;
  transform: perspective(500px) scale(0);
}

.dettales_perfil.activado {
  bottom: 0;
  transform: perspective(500px) scale(1);
}

.dettales_perfil h2 {
  margin: 0;
  padding: 0;
  color: #607D8B;
  font-size: 18px;
  text-transform: uppercase;
}

.dettales_perfil h2 span {
  font-size: 14px;
  color: #CCCCCC;
}

.dettales_perfil p {
  margin: 0;
  padding: 10px 0 0;
  color: #AAAAAA;
}

.cerrar_perfil {
  font-size: 20px;
  position: absolute;
  top: 5%;
  right: 5%;
  color: #F00;
  cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">

  <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">

    <div class="profile">

      <img src="../imagenes/lili.jpg" alt="Foto">

      <label class="view">Ver perfil</label>

      <div class="dettales_perfil">

        <h2>Famoso<br><span>Cargo</span></h2>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo illum, eum temporibus cupiditate vel facere esse sed, ut porro quae explicabo inventore incidunt et, deserunt repellendus non officia tenetur animi!</p>

        <div class="cerrar_perfil"><i class="fa fa-times-circle"></i></div>

      </div>

    </div>

  </div>

  <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">

    <div class="profile">

      <img src="../imagenes/lili.jpg" alt="Foto">

      <label class="view">Ver perfil</label>

      <div class="dettales_perfil">

        <h2>Famoso<br><span>Cargo</span></h2>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo illum, eum temporibus cupiditate vel facere esse sed, ut porro quae explicabo inventore incidunt et, deserunt repellendus non officia tenetur animi!</p>

        <div class="cerrar_perfil"><i class="fa fa-times-circle"></i></div>

      </div>

    </div>

  </div>

  <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">

    <div class="profile">

      <img src="../imagenes/lili.jpg" alt="Foto">

      <label class="view">Ver perfil</label>

      <div class="dettales_perfil">

        <h2>Famoso<br><span>Cargo</span></h2>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo illum, eum temporibus cupiditate vel facere esse sed, ut porro quae explicabo inventore incidunt et, deserunt repellendus non officia tenetur animi!</p>

        <div class="cerrar_perfil"><i class="fa fa-times-circle"></i></div>

      </div>

    </div>

  </div>

</div>

Este es un ejemplo de lo que tengo. Y justo así es cómo funciona.

Lo he intentado así:

$(document).ready(function(e){

        $(".view").click(function(e){

            $(".dettales_perfil").parent(this).addClass('activado');

        });

        $(".cerrar_perfil").click(function(e){

            $(".dettales_perfil").parent(this).removeClass('activado');

        });

    });

Y así:

$(document).ready(function(e){

        $(".view").click(function(e){

            $(".dettales_perfil:nth-child(1)").addClass('activado');

        });

        $(".cerrar_perfil").click(function(e){

            $(".dettales_perfil:nth-child(1)").removeClass('activado');

        });

    });

POr favor, si alguien pudiera ayudarme. No e gustaría usar ID, puesto que la información va a ser totalmente descargada de una base de datos y se generarían id distinto por cada registro.

Agradezco mucho quien me pueda ayudar.

1 respuesta 1

1

Tu problema es que no estas especificando el contexto. Puedes lograrlo con this y next() asi:

$(document).ready(function(e) {

  $(".view").click(function(e) {

    $(this).next(".dettales_perfil").addClass('activado');

  });

  $(".cerrar_perfil").click(function(e) {

    $(this).parent(".dettales_perfil").removeClass('activado');

  });

});
.profile {
  position: relative;
  width: 300px;
  height: 450px;
  background-color: #FFFFFF;
  box-sizing: border-box;
  border: 1px solid #D3D3D3;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 20px 20px rgba(0, 0, 0, .2);
}

.profile img {
  max-width: 100%;
}

.profile .view {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  padding: 5px 10px;
  background-color: #59B548;
  color: #FFFFFF;
  border-radius: 15px;
  text-transform: uppercase;
  text-decoration: none;
  font-weight: bold;
  font-size: 12px;
}

.dettales_perfil {
  height: 50%;
  width: 100%;
  background-color: #FFFFFF;
  position: absolute;
  bottom: 30px;
  text-align: center;
  padding: 20px;
  box-sizing: border-box;
  transition: .5s;
  transform-origin: bottom;
  transform: perspective(500px) scale(0);
}

.dettales_perfil.activado {
  bottom: 0;
  transform: perspective(500px) scale(1);
}

.dettales_perfil h2 {
  margin: 0;
  padding: 0;
  color: #607D8B;
  font-size: 18px;
  text-transform: uppercase;
}

.dettales_perfil h2 span {
  font-size: 14px;
  color: #CCCCCC;
}

.dettales_perfil p {
  margin: 0;
  padding: 10px 0 0;
  color: #AAAAAA;
}

.cerrar_perfil {
  font-size: 20px;
  position: absolute;
  top: 5%;
  right: 5%;
  color: #F00;
  cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<div class="row">

  <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">

    <div class="profile">

      <img src="../imagenes/lili.jpg" alt="Foto">

      <label class="view">Ver perfil</label>

      <div class="dettales_perfil">

        <h2>Famoso<br><span>Cargo</span></h2>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo illum, eum temporibus cupiditate vel facere esse sed, ut porro quae explicabo inventore incidunt et, deserunt repellendus non officia tenetur animi!</p>

        <div class="cerrar_perfil"><i class="fa fa-times-circle"></i></div>

      </div>

    </div>

  </div>

  <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">

    <div class="profile">

      <img src="../imagenes/lili.jpg" alt="Foto">

      <label class="view">Ver perfil</label>

      <div class="dettales_perfil">

        <h2>Famoso<br><span>Cargo</span></h2>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo illum, eum temporibus cupiditate vel facere esse sed, ut porro quae explicabo inventore incidunt et, deserunt repellendus non officia tenetur animi!</p>

        <div class="cerrar_perfil"><i class="fa fa-times-circle"></i></div>

      </div>

    </div>

  </div>

  <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">

    <div class="profile">

      <img src="../imagenes/lili.jpg" alt="Foto">

      <label class="view">Ver perfil</label>

      <div class="dettales_perfil">

        <h2>Famoso<br><span>Cargo</span></h2>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo illum, eum temporibus cupiditate vel facere esse sed, ut porro quae explicabo inventore incidunt et, deserunt repellendus non officia tenetur animi!</p>

        <div class="cerrar_perfil"><i class="fa fa-times-circle"></i></div>

      </div>

    </div>

  </div>

</div>

3
  • Muy bien. Gracias. Pero... Aún me queda algo: No me cierra. Sólo lo abre, pero no lo puedo cerrar. ._.
    – Saco04
    Commented el 17 oct. 2019 a las 22:34
  • Cambia el next() por parent(). Ya edite mi respuesta.
    – alanfcm
    Commented el 17 oct. 2019 a las 22:45
  • 1
    Muchísimas gracias por tu ayuda. Ya te califiqué.
    – Saco04
    Commented el 17 oct. 2019 a las 23:28

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.