在JavaScript中使下拉按钮变为(并保持)绿色

Question

所以，我是编码新手，我一直在努力使下拉按钮变成绿色，当你点击主按钮"Pronto"。我遵循了类似问题的一些步骤，但它们对我不起作用。完全没有影响。你能给我一些见解吗?

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;
}

你甚至可以看到我尝试创建一个类并调用它，但没有工作。我错过了什么?

Answer 1

您的问题是以下代码

$('input[type="button"]').click(function(){
$('input[type="button"].green').removeClass('green')
$(this).addClass('green');
});

您已经使用html中的<button>创建了按钮，但在js中，您使用不存在的<input type="button">引用它们&因此被jQuery忽略.

您的代码应该像下面这样，当单击Pronto按钮时，使下拉按钮变为绿色:

$('#prontoButton').on('click', function(evt) {
$('.dropdownButton').addClass('green');
});