0

veran estoy intentando emular algo parecido a el enlace de abajo. El Problema viene que cuando hago click en las cartas le aplica el color no solo al check sino también al texto que tiene a su lado. pense que el problema podia corregirlo con agregarle un id y asi en ves de poner $(this).addClass('show-color) trate de cambiar el this por el id que tiene el check. pero lo que sucede es que nada mas le aplica el css a la primera carta nada mas.

https://i.imgur.com/45vWpaC.mp4

$(document).on( 'click', '.Web', function(){
    $('.Web').removeClass('show-border');
    $('.Web').removeClass('show-color');
    $(this).addClass('show-border');
    $(this).addClass('show-color');
});
.Web{
    background-color: rgba(237, 235, 225);
    width: 190px;
    height:230px;
    margin: 12px;
    border-radius: 5%;
    box-shadow: 5px 7px rgba(0,0,0,0.1);
    border: 2px solid transparent;
    cursor: Pointer;
}

.t{
  display:flex;
  flex-wrap: wrap;
}

.show-border {
    border: 2px solid #3bff48;
}
.show-color{
    color: rgba(0, 63, 252);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://kit.fontawesome.com/f5b7680abc.js"></script>

<div class="t">
    <div class="Web"><i id="CL" class="fas fa-check-circle"></i>weweweqwe</div>

    <div class="Web"><i id="CL" class="fas fa-check-circle"></i>qweqwe</div>

    <div class="Web"><i id="CL" class="fas fa-check-circle"></i>qeqwe</div>

    <div class="Web"><i id="CL" class="fas fa-check-circle"></i>qeqweqe</div>
</div>

2
  • Los id solo lo puede tener un elemento del html, debes cambiar id="CL", por CL1, CL2, CL3, CL4. No puedes ocupar CL para todos Commented el 14 mar. 2021 a las 4:04
  • cierto. pero para no hacer algo engorroso como cambiarle cada id por uno diferente. Porque lo que sucede es que en este ejemplo lo especifique asi. Pero en mi código original esas cartas se generan mediante un template y llamándola con una api de stripe para acceder a los nombres productos etc... entonces lo que quiero decir con esto es que cada carta siempre le generara eso <i id="CL" class="fas fa-check-circle"></i>
    – John
    Commented el 14 mar. 2021 a las 4:11

1 respuesta 1

0

Te recomiendo simplificarlo todo mediante css, simplemente detectando el click en la "carta" y agregarle el class active, y mediante css este pre-escrito que si tiene .Web y .active me configure el y el border:

ejemplo:

$(document).on( 'click', '.Web', function(){
    $('.Web').removeClass('active');
$(this).addClass("active");
});
.Web{
    background-color: rgba(237, 235, 225);
    width: 190px;
    height:230px;
    margin: 12px;
    border-radius: 5%;
    box-shadow: 5px 7px rgba(0,0,0,0.1);
    border: 2px solid transparent;
    cursor: Pointer;
}

.Web.active{
border: 2px solid #3bff48;
}
.Web.active i{color:rgba(0, 63, 252);}
.t{
  display:flex;
  flex-wrap: wrap;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<script src="https://kit.fontawesome.com/f5b7680abc.js"></script>
<div class="t">
    <div class="Web"><i id="CL" class="fas fa-check-circle"></i>weweweqwe</div>

    <div class="Web"><i id="CL" class="fas fa-check-circle"></i>qweqwe</div>

    <div class="Web"><i id="CL" class="fas fa-check-circle"></i>qeqwe</div>

    <div class="Web"><i id="CL" class="fas fa-check-circle"></i>qeqweqe</div>
</div>

2
  • el código corre perfectamente pero como en este caso estoy usando templates para generar las cartas dinámicamente no me agarro aunque le hice unos cambios y me agarro
    – John
    Commented el 14 mar. 2021 a las 6:42
  • me alegra que te ayuda funcionado mi respuesta, te agradeceria marcarla como correcta.
    – IntruzO
    Commented el 15 mar. 2021 a las 21:23

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.