Estoy tratando de agregar una clase a un elemento específico que contiene un contenedor principal con una ID única.
Tengo varios botones contenidos en un div, y todos usan las mismas clases. Por alguna razón, no puedo usar solo $(esto), así que creé un ciclo que agrega una identificación única a los contenedores.
HTML
<div class='section'> <div class='btn-container' id='btn-1'> <button class='btn'></button> </div> <div class='btn-container' id='btn-2'> <button class='btn'></button> </div> <div class='btn-container' id='btn-3'> <button class='btn'></button> </div> </div>JQuery
$("button").click(function (e) { e.preventDefault(); var target = $(e.target).parents(".button-container").attr("id"); console.log(target); $(target).find(".btn").addClass("active"); });Estoy apuntando a la ID y funciona, el archivo console.log me devuelve la información correcta. Sin embargo, por alguna razón, no puedo agregar la clase.
¡Gracias de antemano por cualquier ayuda! (:
Editado: estoy tratando de agregar la clase activa al botón que está contenido en la ID.
Ejemplo: $("#btn-1 .btn").addClass("activo"); pero con el ID rellenado dinámicamente en función de la información del clic.
Mantenga las cosas simples, esto debería funcionar
$(document).ready(function() { $("button").click(function (e) { e.preventDefault(); $(e.target).addClass("active") }); }); .active{ border: 1px red solid; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class='section'> <div class='btn-container' id='btn-1'> <button class='btn'>Test</button> </div> <div class='btn-container' id='btn-2'> <button class='btn'>Test</button> </div> <div class='btn-container' id='btn-3'> <button class='btn'>Test</button> </div> </div>