我正在尝试使用按钮来过滤页面中的元素列表。
到目前为止,如果单击其中一个按钮,所有其他按钮都将被禁用,然后如果我单击另一个按钮,则只会启用该按钮,其他按钮将被禁用。
我不知道如何切换它,所以如果按钮已经激活,它将取消禁用所有按钮,包括它自己。
html:
<div class="calendar-filter">
<a href="#" class="dnco calendar-color-key btn btn-raised"><i class="material-icons"></i>Duty NCO</a>
<a href="#" class="main calendar-color-key btn btn-raised"><i class="material-icons"></i>Main Cadets</a>
<a href="#" class="wmt calendar-color-key btn btn-raised"><i class="material-icons"></i>Wing Marching Team</a>
<a href="#" class="juniors calendar-color-key btn btn-raised"><i class="material-icons"></i>Juniors</a>
<a href="#" class="exercise calendar-color-key btn btn-raised"><i class="material-icons"></i>Exercise</a>
<a href="#" class="other calendar-color-key btn btn-raised"><i class="material-icons"></i>Other</a>
</div>
js:
function filterButtonClick(buttonClass) {
$('.calendar-color-key').each(function() {
$(this).addClass('disabled');
if($(this).hasClass(buttonClass)) {
$(this).removeClass('disabled');
}
});
}
$('.calendar-color-key').on('click', function() {
var filterButtonClasses = this.classList;
filterButtonClick(filterButtonClasses[0]);
});
最佳答案
$(".calendar-color-key").click(function() { //select by class
var clicked = $(this);
if (clicked.hasClass('toggle')) {
$('.calendar-color-key').removeClass('disabled'); //enable all again
clicked.removeClass('toggle');
} else {
$('.calendar-color-key').removeClass('toggle');
clicked.addClass('toggle');
clicked.removeClass('disabled');
$('.calendar-color-key').not(clicked).addClass('disabled'); //disable everything except clicked element
}
});
关于javascript按钮一次只切换一个,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34944742/