【发布时间】：2020-11-03 16:28:25
【问题描述】：
我正在尝试创建一个“工作”过滤器 这将根据 Location 和 Departments
过滤职位首先我显示所有按部门划分的工作，如下所示：
- 部门
-- 工作
-- 工作
-- 工作 - 部门
-- 工作
-- 工作
-- 工作
然后我想用 2 个下拉选择框过滤它们 仅使用简单的 Jquery 和 CSS
还添加了“无结果”选项，当没有组合时会显示
我认为我非常接近，但它仍然不能完美地与所有人一起使用 组合。觉得我错过了什么
$("select#locations").change(function() {
// Get selected option value from dropdown
let location = $(this).children("option:selected").val();
let careerBox = $(".career-box");
// $(".department").removeClass("hide");
let departmentTitle = $(".department-title");
// console.log(location);
// Remove all selected classes first
careerBox.removeClass("show");
careerBox.removeClass("hide");
$(".locations span").removeClass("selected");
// Add selected class to selected location
$('.locations span[data-location="' + location + '"]').addClass("selected");
careerBox.each(function() {
if (location != "all-locations") {
// departmentTitle.addClass("hide");
if ($(this).find(".locations span").hasClass("selected")) {
$(this).addClass("show");
departmentTitle.addClass("hide");
$(this).siblings(".department-title").removeClass("hide");
// $(this).siblings(departmentTitle).addClass("show");
} else {
$(this).addClass("hide");
}
} else {
departmentTitle.removeClass("hide");
}
});
// $(".filter select#departments").val("all-departments").trigger("change");
// console.log($(".all-careers").height());
if ($(".all-careers").height() > 1) {
$(".no-results").removeClass("show");
} else {
$(".no-results").addClass("show");
}
});
// Departments
$("#departments").change(function() {
// Get selected option value from dropdown
let departmentType = $(this).children("option:selected").val();
// console.log(departmentType);
let departmentBox = $(".department");
$(".department").removeClass("selected").removeClass("show");
$(".department").addClass("hide");
departmentBox.each(function() {
if (departmentType != "all-departments") {
$('.department[data-department="' + departmentType + '"]').addClass(
"selected show"
);
$('.department[data-department="' + departmentType + '"]').removeClass(
"hide"
);
} else {
$(".department")
.removeClass("selected")
.removeClass("show")
.removeClass("hide");
}
});
// No results
// $(".filter select#locations").val("all-locations").trigger("change");
// console.log($(".all-careers").height());
if ($(".all-careers").height() > 1) {
$(".no-results").removeClass("show");
} else {
$(".no-results").addClass("show");
}
});
这是一个几乎完成的小提琴 https://jsfiddle.net/hamergil/x2b8s6mv/82/
如果有人可以帮助使其完美运行 感激不尽
谢谢
【问题讨论】：
-
到底是什么问题？你说它不能完美运行是什么意思？
-
例如尝试选择以色列。Yuo 会看到第一个标题是“隐藏”类，您需要检查代码才能看到它...“客户成功和技术运营”是失踪。当工作与它们相关联时，它应该始终显示标题