我正在尝试使用按钮来过滤页面中的元素列表。
到目前为止,如果点击其中一个按钮,其他所有按钮都将被禁用,然后如果我点击另一个按钮,那么只会启用其他按钮,其他按钮将被禁用。
我无法理解如何切换它,所以如果按钮已经处于活动状态,它将取消禁用包括其自身在内的所有按钮。
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]);
});
答案 0 :(得分:5)
$(".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
}
});
答案 1 :(得分:0)
为什么不使用像按钮这样的按钮的类默认类,所以当你想要禁用它们时,只需使用:
$(".filter-button").addClass("disabled");
使用一个活跃的课程,这将是一个很大的帮助,所以你可以
$(".active").on('click', function(){
$(".filter-button").addClass("disabled");
$(".active").removeClass("active");
});
更新:添加禁用时不要忘记删除活动类我更新了代码。