Tengo varios botones con clase activa e inactiva. Quiero que sea un código más corto y hacerlo globalmente. Por favor, ayúdame a hacerlo. y también agregó un elemento que se muestra y se oculta para cada botón de clic activo.
$('.show-btn').on('click', function(){ $(this).addClass('active'); $('.hide-btn').removeClass('active') $('.p-thanks').removeClass('inactive') }) $('.hide-btn').on('click', function(){ $(this).addClass('active'); $('.show-btn').removeClass('active') $('.p-thanks').addClass('inactive') }) $('.approve').on('click', function(){ $(this).addClass('active'); $('.disapprove').removeClass('active') $('.p-approve').removeClass('inactive') }) $('.disapprove').on('click', function(){ $(this).addClass('active'); $('.approve').removeClass('active') $('.p-approve').addClass('inactive') }) $('.agree').on('click', function(){ $(this).addClass('active'); $('.disagree').removeClass('active') $('.p-agree').removeClass('inactive') }) $('.disagree').on('click', function(){ $(this).addClass('active'); $('.agree').removeClass('active') $('.p-agree').addClass('inactive') }) <style> .active{ background-color: blue; color: white; } .inactive{display: none;} .btn{padding: 5px 20px;} div{margin-top:20px;} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div> <button class="show-btn btn">Show</button> <button class="hide-btn btn">Hide</button> <br> <p class="p-thanks inactive">Thank you</p> </div> <div> <button class="approve btn">Approve</button> <button class="disapprove btn">Disapprove</button> <br> <p class="p-approve inactive">Approve</p> </div> <div> <button class="agree btn">Agree</button> <button class="disagree btn">Disagree</button> <br> <p class="p-agree inactive">Agree</p> </div>Todo lo que quiero lograr es un código menos.
Puede usar brothers() para acceder a los elementos DOM como se menciona a continuación:
$('.btn').on('click', function(){ $(this).addClass('active'); $(this).siblings('.btn').removeClass('active'); $(this).siblings('p').toggleClass('inactive'); }); <style> .active{ background-color: blue; color: white; } .inactive{display: none;} .btn{padding: 5px 20px;} div{margin-top:20px;} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div> <button class="show-btn btn">Show</button> <button class="hide-btn btn">Hide</button> <br> <p class="p-thanks inactive">Thank you</p> </div> <div> <button class="approve btn">Approve</button> <button class="disapprove btn">Disapprove</button> <br> <p class="p-approve inactive">Approve</p> </div> <div> <button class="agree btn">Agree</button> <button class="disagree btn">Disagree</button> <br> <p class="p-agree inactive">Agree</p> </div>