Entonces, soy nuevo en la codificación y he estado luchando para hacer que un botón desplegable se vuelva verde cuando hace clic en el botón principal "Pronto". He seguido algunos pasos de preguntas similares aquí, pero no me funcionaron. Sin efectos en absoluto. ¿Puedes darme algunas ideas?
HTML:
<div class="btn-group"> <button class="btn btn-default">Pronto</button> <button type="button" class="btn btn-default dropdown-toggle dropdown-icon" data-toggle="dropdown" aria-expanded="false"> <span class="sr-only">Toggle Dropdown</span> </button> <div class="dropdown-menu" role="menu" style=""> <a class="dropdown-item" href="#">Pronto</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Item Não Disponível</a> </div>JavaScript:
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-toggle="tooltip"]')) var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) { return new bootstrap.Tooltip(tooltipTriggerEl) }) var registerAccountButton = document.getElementById('registerAccountButton'); var registerAccountModal = new bootstrap.Modal(document.getElementById('registerAccountModal'), { keyboard: false }) registerAccountButton.addEventListener('click', function () { registerAccountModal.toggle(); }) $('input[type="button"]').click(function(){ $('input[type="button"].green').removeClass('green') $(this).addClass('green'); });CSS:
.green { background-color: greenyellow; }Incluso puede ver que intenté crear una clase y llamarla, pero no funcionó. ¿Qué me estoy perdiendo?
Tu problema es el siguiente código.
$('input[type="button"]').click(function(){ $('input[type="button"].green').removeClass('green') $(this).addClass('green'); }); Ha creado sus botones usando el <button> en html, pero en js los está referenciando usando <input type="button"> que no está presente y, por lo tanto , jQuery lo ignora .
Su código debe ser algo como lo siguiente, para hacer que el botón desplegable sea verde, cuando se haga clic en el botón Pronto:
$('#prontoButton').on('click', function(evt) { $('.dropdownButton').addClass('green'); });