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>
<i id="CL" class="fas fa-check-circle"></i>