javascript - jQuery filters sometimes showing all elements -
when toggle between jquery filters show elements class, selected filter shows elements , not ones respective class.
you can see in below fiddle. switch between select options , they'll show results.
function activatebuttons(_data){ $('.jobs-teams select').on("change", function(e) { e.preventdefault(); for(i = 0; < _data.length; i++) { var teamraw = _data[i].title; var team = cleanstring(teamraw); var jobs = $(".jobs-list"); if ($(this).find(":selected").hasclass(team)) { if ($(this).hasclass("active")) { $(this).removeclass("active"); jobs.find(".job").fadein("fast"); } else { $(".jobs-teams").find("a").removeclass("active"); $(this).addclass("active"); jobs.find("."+team).fadein("fast"); jobs.find(".job").not("."+team).fadeout("fast"); } } } }) }
issues code need updated following.
//$(this) return select tag. should target options if ($(this).hasclass("active")) { $(this).removeclass("active"); jobs.find(".job").fadein("fast"); } else { //$(".jobs-teams").find("a") returns undefined remember changed anchors select options $(".jobs-teams").find("a").removeclass("active"); $(this).addclass("active"); jobs.find("."+team).fadein("fast"); jobs.find(".job").not("."+team).fadeout("fast"); } code snippet:
// replace "leverdemo" own company name url = 'https://api.lever.co/v0/postings/leverdemo?group=team&mode=json' //functions checking if variable unspecified function cleanstring(string) { if (string) { var cleanstring = string.replace(/\s+/ig, ""); return cleanstring; } else { return "uncategorized"; } } function nullcheck(string) { if (!string) { var result = 'uncategorized' return result; } else { return string; } } function createjobs(_data) { for(i = 0; < _data.length; i++) { var team = nullcheck(_data[i].title) var teamcleanstring = cleanstring(team); $('#jobs-container .jobs-teams select').append( '<option value="" class=' + teamcleanstring + '>' + team + '</option>' ); } for(i = 0; < _data.length; i++) { (j = 0; j < _data[i].postings.length; j ++) { var posting = _data[i].postings[j] var title = posting.text var description = posting.description //making each job description shorter 250 characters var shortdescription = $.trim(description).substring(0, 250) .replace('\n', ' ') + "..."; var location = nullcheck(posting.categories.location); var locationcleanstring = cleanstring(location); var commitment = nullcheck(posting.categories.commitment); var commitmentcleanstring = cleanstring(commitment); var team = nullcheck(posting.categories.team); var teamcleanstring = cleanstring(team); var link = posting.hostedurl; $('#jobs-container .jobs-list').append( '<div class="job '+teamcleanstring+' '+locationcleanstring+' '+commitmentcleanstring+'">' + '<a class="job-title" href="'+link+'"">'+title+'</a>' + '<p class="tags"><span>'+team+'</span><span>'+location+'</span><span>'+commitment+'</span></p>' + '<p class="description">'+shortdescription+'</p>' + '<a class="btn" href="'+link+'">learn more</a>' + '</div>' ); } } } function activatebuttons(_data){ $('.jobs-teams select').on("change", function(e) { e.preventdefault(); for(i = 0; < _data.length; i++) { var teamraw = _data[i].title; var team = cleanstring(teamraw); var jobs = $(".jobs-list"); var $this = $(this).find(":selected"); if ($this.hasclass(team)) { if ($this.hasclass("active")) { $this.removeclass("active"); jobs.find(".job").fadein("fast"); } else { $(".jobs-teams select").find("option").removeclass("active"); $this.addclass("active"); jobs.find("."+team).fadein("fast"); jobs.find(".job").not("."+team).fadeout("fast"); } } } }).change(); } //fetching job postings lever's postings api $.ajax({ datatype: "json", url: url, success: function(data){ createjobs(data); activatebuttons(data); } });body { font-family: 'lato', sans-serif; overflow-y: scroll; } p { margin: 0 0 1em 0; line-height: 1.4em; } * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } section { position: relative; padding: 30px; } .container { max-width: 960px; margin: 0 auto; } .job { display: inline-block; vertical-align: top; width: 50%; padding: 40px 30px; } h1 { font-size: 48px; color: #454545; padding: 0 30px; } .job-title { font-size: 24px; text-decoration: none; color: #454545; } .job-title:hover { color: #00a0df; } .tags span { color: #999; font-size: 12px; color: graymediumdark; } .tags span:after { content: ', '; } .tags span:last-of-type:after { content: ''; } .description { color: #999; } .btn { display: inline-block; padding: 7px 15px; text-decoration: none; font-weight: normal; color: #999; border: 2px solid #ebebeb; -webkit-border-radius: 4px; border-radius: 4px; background: #f9f9f9; } .btn:hover { background: #ebebeb; color: #555; } .btn.active { background: #454545; border-color: #454545; color: #fff; } .jobs-teams { margin-bottom: 40px; padding: 0 30px } .jobs-teams .btn { margin: 0 8px 8px 0; } .jobs-teams .btn:first-of-type { margin-left: 0; } .jobs-teams .btn:last-of-type { margin-right: 0; }<section> <div class="container" id="jobs-container"> <h1>open jobs</h1> <div class="jobs-teams"> <select> </select> </div> <div class="jobs-list"> </div> </div> </section> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
Comments
Post a Comment