Estoy tratando de hacer que cada botón cambie de color al hacer clic. Sin embargo, quiero separar los botones 1-3 de los botones 4-6 para que sean independientes entre sí. Quiero poder hacer clic en los botones 1-3 y cambiar de color sin afectar 4-6 y viceversa. Mi código está adjunto. Estoy seguro de que esto es muy simple, pero mi débil mente no puede resolverlo :-) ¿Alguna sugerencia?
$(document).ready(function(){ $("button").click(function() { $(".featuredBtn.active").removeClass("active"); $(this).addClass("active"); }); }); $(document).ready(function(){ $("button").click(function() { $(".featuredBtn2.active").removeClass("active"); $(this).addClass("active"); }); }); .featuredBtn.active, .featuredBtn2.active { background-color: #bf9471; color: white; } .featuredBtn, .featuredBtn2 { width: 250px; height: 50px; color: #8c8c8c; font-weight: 700; background-color: #f4efeb; border: none; letter-spacing: 2px; outline: none; } .row { margin-bottom: 40px; } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script src="test.js"></script> <link rel="stylesheet" href="test.css"> </head> <body> <div class="row"> <div class="col-lg-12 col-xs-12" style="text-align: center;"> <button type="button" class="featuredBtn active" id="btnOne">BUTTON ONE</button> <button type="button" class="featuredBtn" id="btnTwo">BUTTON TWO</button> <button type="button" class="featuredBtn" id="btnThree">BUTTON THREE</button> </div> </div> <div class="row2"> <div class="col-lg-12 col-xs-12" style="text-align: center;"> <button type="button" class="featuredBtn2 active" id="btnFour">BUTTON FOUR</button> <button type="button" class="featuredBtn2" id="btnFive">BUTTON FIVE</button> <button type="button" class="featuredBtn2" id="btnSix">BUTTON SIX</button> </div> </div> </body> </html>En lugar de aplicar ambos controladores a todas las instancias de $('button') , apunte específicamente a las instancias que desee. Su marcado actual los separa por class , por lo que puede usar $(".featuredBtn") y $(".featuredBtn2") para identificar esos elementos:
$(document).ready(function(){ $(".featuredBtn").click(function() { $(".featuredBtn.active").removeClass("active"); $(this).addClass("active"); }); }); $(document).ready(function(){ $(".featuredBtn2").click(function() { $(".featuredBtn2.active").removeClass("active"); $(this).addClass("active"); }); }); .featuredBtn.active, .featuredBtn2.active { background-color: #bf9471; color: white; } .featuredBtn, .featuredBtn2 { width: 250px; height: 50px; color: #8c8c8c; font-weight: 700; background-color: #f4efeb; border: none; letter-spacing: 2px; outline: none; } .row { margin-bottom: 40px; } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script src="test.js"></script> <link rel="stylesheet" href="test.css"> </head> <body> <div class="row"> <div class="col-lg-12 col-xs-12" style="text-align: center;"> <button type="button" class="featuredBtn active" id="btnOne">BUTTON ONE</button> <button type="button" class="featuredBtn" id="btnTwo">BUTTON TWO</button> <button type="button" class="featuredBtn" id="btnThree">BUTTON THREE</button> </div> </div> <div class="row2"> <div class="col-lg-12 col-xs-12" style="text-align: center;"> <button type="button" class="featuredBtn2 active" id="btnFour">BUTTON FOUR</button> <button type="button" class="featuredBtn2" id="btnFive">BUTTON FIVE</button> <button type="button" class="featuredBtn2" id="btnSix">BUTTON SIX</button> </div> </div> </body> </html>Simple, solo use las clases que ya ha proporcionado en el selector.
Además, tenga en cuenta que solo necesita un controlador listo, no dos.
$(document).ready(function(){ $("button.featuredBtn").click(function() { $(".featuredBtn.active").removeClass("active"); $(this).addClass("active"); }); $("button.featuredBtn2").click(function() { $(".featuredBtn2.active").removeClass("active"); $(this).addClass("active"); }); }); .featuredBtn.active, .featuredBtn2.active { background-color: #bf9471; color: white; } .featuredBtn, .featuredBtn2 { width: 250px; height: 50px; color: #8c8c8c; font-weight: 700; background-color: #f4efeb; border: none; letter-spacing: 2px; outline: none; } .row { margin-bottom: 40px; } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script src="test.js"></script> <link rel="stylesheet" href="test.css"> </head> <body> <div class="row"> <div class="col-lg-12 col-xs-12" style="text-align: center;"> <button type="button" class="featuredBtn active" id="btnOne">BUTTON ONE</button> <button type="button" class="featuredBtn" id="btnTwo">BUTTON TWO</button> <button type="button" class="featuredBtn" id="btnThree">BUTTON THREE</button> </div> </div> <div class="row2"> <div class="col-lg-12 col-xs-12" style="text-align: center;"> <button type="button" class="featuredBtn2 active" id="btnFour">BUTTON FOUR</button> <button type="button" class="featuredBtn2" id="btnFive">BUTTON FIVE</button> <button type="button" class="featuredBtn2" id="btnSix">BUTTON SIX</button> </div> </div> </body> </html>Su error es que agrega ambos controladores de clic a cada button en lugar de agregar solo el controlador apropiado a los botones apropiados. Entonces, cada vez que presiona un botón, llama a ambos controladores consecutivamente, en lugar de solo a los controladores para ese conjunto de botones.
Reemplazar el primer $("button") con $(".featuredBtn") y el segundo $("button") con $(".featuredBtn2") logra lo que está tratando de lograr.
Tenga en cuenta que no es necesario llamar a $(document).ready() dos veces. Simplemente puede llamarlo una vez que combine el código para ambos controladores en esa única llamada. Técnicamente, esto no es un error, pero su código es más limpio si simplemente llama a $(document).ready() aquí.
$(document).ready(function(){ $(".featuredBtn").click(function() { $(".featuredBtn.active").removeClass("active"); $(this).addClass("active"); }); $(".featuredBtn2").click(function() { $(".featuredBtn2.active").removeClass("active"); $(this).addClass("active"); }); }); .featuredBtn.active, .featuredBtn2.active { background-color: #bf9471; color: white; } .featuredBtn, .featuredBtn2 { width: 250px; height: 50px; color: #8c8c8c; font-weight: 700; background-color: #f4efeb; border: none; letter-spacing: 2px; outline: none; } .row { margin-bottom: 40px; } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script src="test.js"></script> <link rel="stylesheet" href="test.css"> </head> <body> <div class="row"> <div class="col-lg-12 col-xs-12" style="text-align: center;"> <button type="button" class="featuredBtn active" id="btnOne">BUTTON ONE</button> <button type="button" class="featuredBtn" id="btnTwo">BUTTON TWO</button> <button type="button" class="featuredBtn" id="btnThree">BUTTON THREE</button> </div> </div> <div class="row2"> <div class="col-lg-12 col-xs-12" style="text-align: center;"> <button type="button" class="featuredBtn2 active" id="btnFour">BUTTON FOUR</button> <button type="button" class="featuredBtn2" id="btnFive">BUTTON FIVE</button> <button type="button" class="featuredBtn2" id="btnSix">BUTTON SIX</button> </div> </div> </body> </html>