Entonces, con este código, cuando hago clic en la tarjeta, la tarjeta se selecciona. Me gustaria solo el boton para poder asignar la clase activa. Gracias De antemano, ¡todavía estoy aprendiendo a usar correctamente Javascript!
$(".service-option-card").click(function() { $(this).addClass("active").siblings('.active').removeClass('active'); }); .service-option-container { margin: 1em 0 4em 0; display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 1em; row-gap: 1em; } .service-option-container .service-option-card { border: 1px solid black; border-radius: 20px; padding: 1em; margin-left: 1em; margin-right: 1em; } .service-option-container .service-option-card .service-option-btn { margin: 1em 0; } .service-option-container .service-option-card .extra-pad-bottom { padding-bottom: 2em; } .service-option-container .service-option-card .option-price { font-weight: bold; } .service-option-container .service-option-card:hover { cursor: pointer; } .service-option-container .service-option-card.active { background-color: #efeeee; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="service-option-container"> <div class="service-option-card">Card Content goes in here <br><a class="service-option-btn">Button</a></div> <div class="service-option-card">Card Content goes in here <br><a class="service-option-btn">Button</a></div> <div class="service-option-card">Card Content goes in here <br><a class="service-option-btn">Button</a></div> <div class="service-option-card">Card Content goes in here <br><a class="service-option-btn">Button</a></div> <div class="service-option-card">Card Content goes in here <br><a class="service-option-btn">Button</a></div> <div class="service-option-card">Card Content goes in here <br><a class="service-option-btn">Button</a></div> <div class="service-option-card">Card Content goes in here <br><a class="service-option-btn">Button</a></div> </div>Cambie el selector JS para que apunte al botón y luego $(this) debe buscar el elemento principal usando .parent() para aplicar la clase activa a la tarjeta
¡También se agregó css al botón para que sea más fácil de ver!
$(".service-option-btn").click(function() { $(this).parent().addClass("active").siblings('.active').removeClass('active'); }); .service-option-container { margin: 1em 0 4em 0; display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 1em; row-gap: 1em; } .service-option-container .service-option-card { border: 1px solid black; border-radius: 20px; padding: 1em; margin-left: 1em; margin-right: 1em; } .service-option-container .service-option-card .service-option-btn { margin: 1em 0; } .service-option-container .service-option-card .extra-pad-bottom { padding-bottom: 2em; } .service-option-container .service-option-card .option-price { font-weight: bold; } .service-option-container .service-option-card:hover { cursor: pointer; } .service-option-container .service-option-card.active { background-color: #efeeee; } .service-option-btn { background-color: red; padding: 5px; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="service-option-container"> <div class="service-option-card">Card Content goes in here <br><a class="service-option-btn">Button</a></div> <div class="service-option-card">Card Content goes in here <br><a class="service-option-btn">Button</a></div> <div class="service-option-card">Card Content goes in here <br><a class="service-option-btn">Button</a></div> <div class="service-option-card">Card Content goes in here <br><a class="service-option-btn">Button</a></div> <div class="service-option-card">Card Content goes in here <br><a class="service-option-btn">Button</a></div> <div class="service-option-card">Card Content goes in here <br><a class="service-option-btn">Button</a></div> <div class="service-option-card">Card Content goes in here <br><a class="service-option-btn">Button</a></div> </div>