Javascript jQuery过滤器有时会显示所有元素

当我在显示具有特定类的元素的jQuery过滤器之间切换时，有时所选过滤器会显示所有元素，而不仅仅是具有相应类的元素

你可以在下面的小提琴中看到这一点。在选择选项之间切换，有时会显示所有结果

功能激活按钮（\u数据）{
$（'.jobs teams select'）。打开（“更改”，函数（e）{
e、 预防默认值（）；
对于（i=0；i<\u data.length；i++）{
var teamRaw=_数据[i]。标题；
var team=cleanString（teamRaw）；
变量作业=$（“.jobs list”）；
if（$（this）.find（“：selected”）.hasClass（团队））{
if（$（this.hasClass（“active”）{
$（此）.removeClass（“活动”）；
jobs.find（“.job”）.fadeIn（“fast”）；
}
否则{
$（“.jobs teams”）.find（“a”）.removeClass（“active”）；
$（此）.addClass（“活动”）；
jobs.find（“.”+team）.fadeIn（“fast”）；
工作。找到（“.job”）。而不是（“.”+团队）。淡出（“快速”）；
}
} 
}
})
}

需要更新的代码问题如下

//$(this) return the select tag. you should target options
if ($(this).hasClass("active")) {
   $(this).removeClass("active");
   jobs.find(".job").fadeIn("fast");
}
else {
   //$(".jobs-teams").find("a") returns undefined remember that you changed the anchors to select options
   $(".jobs-teams").find("a").removeClass("active");
   $(this).addClass("active");
   jobs.find("."+team).fadeIn("fast");
   jobs.find(".job").not("."+team).fadeOut("fast");
}

代码片段：

//用您自己的公司名称替换“leverdemo”
url='1〕https://api.lever.co/v0/postings/leverdemo?group=team&mode=json'
//用于检查变量是否未指定的函数
函数cleanString（字符串）{
如果（字符串）{
var cleanString=string.replace（/\s+/ig，“”）；
返回干净字符串；
}
否则{
返回“未分类”；
}
}
函数空值检查（字符串）{
如果（！字符串）{
变量结果='未分类'
返回结果；
}
否则{
返回字符串；
}
}
函数createJobs（_数据）{
对于（i=0；i<\u data.length；i++）{
var team=nullCheck（_data[i].title）
var teamCleanString=cleanString（团队）；
$（'#作业容器。作业组选择'）。追加(
''+团队+''
);
}
对于（i=0；i<\u data.length；i++）{
对于（j=0；j<_数据[i].postings.length；j++）{
var过账=_数据[i]。过账[j]
var title=posting.text
var description=posting.description
//使每个职位描述少于250个字符
var shortDescription=$.trim（description）.substring（0250）
.替换（'\n'，''）+“…”；
变量位置=空检查（过帐.类别.位置）；
var locationCleanString=cleanString（位置）；
var承诺=空支票（过账.类别.承诺）；
var commitmentCleanString=cleanString（承诺）；
var team=nullCheck（posting.categories.team）；
var teamCleanString=cleanString（团队）；
var link=posting.hostedUrl；
$（'#jobs container.jobs list'）。追加(
'' +
'' +
“
”+团队+“”+位置+“”+承诺+”
”+
“
”+shortDescription+”
'+
'' +
''  
);
}
}
}
功能激活按钮（_数据）{
$（'.jobs teams select'）。打开（“更改”，函数（e）{
e、 预防默认值（）；
对于（i=0；i<\u data.length；i++）{
var teamRaw=_数据[i]。标题；
var team=cleanString（teamRaw）；
变量作业=$（“.jobs list”）；
var$this=$（this.find（“：selected”）；
if（$this.hasClass（团队））{
if（$this.hasClass（“active”）{
$this.removeClass（“活动”）；
jobs.find（“.job”）.fadeIn（“fast”）；
}
否则{
$（“.jobs teams select”）.find（“option”）.removeClass（“active”）；
$this.addClass（“活动”）；
jobs.find（“.”+team）.fadeIn（“fast”）；
工作。找到（“.job”）。而不是（“.”+团队）。淡出（“快速”）；
}
} 
}
}).change（）；
}
//从Lever的发布API获取作业发布
$.ajax({
数据类型：“json”，
url:url，
成功：功能（数据）{
创建作业（数据）；
激活按钮（数据）；
}
});
正文{
字体系列：“Lato”，无衬线；
溢出y：滚动；
}
p{
边际：0.01米0；
线高：1.4em；
}
* {
-webkit框大小：边框框；
-moz框大小：边框框；
-webkit框大小：边框框；
-moz框大小：边框框；
框大小：边框框；
}
部分{
位置：相对位置；
填充：30px；
}
.集装箱{
最大宽度：960像素；
保证金：0自动；
}
.工作{
显示：内联块；
垂直对齐：顶部；
宽度：50%；
填充：40px 30px；
}
h1{
字体大小：48px；
颜色：#4545；
填充：0 30px；
}
1.职位名称{
字体大小：24px；
文字装饰：无；
颜色：#4545；
}
.职务：悬停{
颜色：#00A0DF；
}
.标签跨度{
颜色：#999；
字体大小：12px；
颜色：灰色、中暗色；
}
.标签跨度：之后{
内容:",",；
}
.标记范围：类型的最后一个：之后{
内容：''；
}
.说明{
颜色：#999；
}
.btn{
显示：内联块；
填充：7px 15px；
文字装饰：无；
字体大小：正常；
颜色：#999；
边框：2px实心#ebebebeb；
-webkit边界半径：4px；
边界半径：4px；
背景#f9f9f9；
}
.btn:悬停{
背景：#ebebeb；
颜色：#555；
}
.btn.active{
背景#4545；
边框颜色：#4545；
颜色：#fff；
}
.就业小组{
边缘底部：40px；
填充：0 30px
}
.jobs teams.btn{
保证金：0 8px 8px 0；
}
.jobs团队。btn：第一种类型{
左边距：0；
}
.jobs teams.btn:类型的最后一个{
右边距：0；
}

空缺职位
需要更新的代码问题如下

//$(this) return the select tag. you should target options
if ($(this).hasClass("active")) {
   $(this).removeClass("active");
   jobs.find(".job").fadeIn("fast");
}
else {
   //$(".jobs-teams").find("a") returns undefined remember that you changed the anchors to select options
   $(".jobs-teams").find("a").removeClass("active");
   $(this).addClass("active");
   jobs.find("."+team).fadeIn("fast");
   jobs.find(".job").not("."+team).fadeOut("fast");
}

代码片段：


//用您自己的公司名称替换“leverdemo”
url='1〕https://api.lever.co/v0/postings/leverdemo?group=team&mode=json'
//用于检查变量是否未指定的函数
函数cleanString（字符串）{
如果（字符串）{
var cleanString=string.replace（/\s+/ig，“”）；
返回干净字符串；
}
否则{
返回“未分类”；
}
}
函数空值检查（字符串）{
如果（！字符串）{
变量结果='未分类'
返回结果；
}
否则{
返回字符串；
}
}
函数createJobs（_数据）{
对于（i=0；i<\u）数据
function activateButtons(_data) {
  $('.jobs-teams select').on("change", function(e) {
      e.preventDefault();
      var selected_class = $('.jobs-teams select').find(':selected').attr('class');
      $('.jobs-list').find('div.job')
        .not('.' + selected_class).fadeOut('fast').end() //remove the ones that do not match
        .filter('.' + selected_class).not(':visible').fadeIn('fast'); // bring in the ones that do match (and are not already visible)
    })
    .change(); //have the form pre-load with the default selected value
}