javascript - jQuery:将按钮过滤器转换为选择菜单选项？

Question

我正在使用 Lever 的职位列表 API，但在其当前形式中，它使用按钮按类别过滤职位。我怎样才能把按钮变成一个完整的选择菜单？

在 Fiddle 中，选项是“业务开发”、“客户成功”，因此这些将是我要创建的选择菜单中的选项示例。

Fiddle .

HTML:

<section>
  <div class="container" id="jobs-container">
    <h1>Open jobs</h1>
    <div class="jobs-teams">
    </div>
    <div class="jobs-list">
    </div>
  </div>
</section>  

JS:

url = 'https://api.lever.co/v0/postings/leverdemo?group=team&mode=json'

//Functions for checking if the variable is 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; i < _data.length; i++) {

    var team = nullCheck(_data[i].title)
    var teamCleanString = cleanString(team);
    $('#jobs-container .jobs-teams').append(
        '<a href="#" class="btn '+teamCleanString+'">'+team+'</a>'
      );
  }

  for(i = 0; i < _data.length; i++) {
    for (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 than 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>'  

      );
    }
  }
}

//Creating filter buttons for sorting your jobs
function activateButtons(_data){
  $('.jobs-teams').on("click", "a", function(e) {
    e.preventDefault();
    for(i = 0; i < _data.length; i++) {
      var teamRaw = _data[i].title;
      var team = cleanString(teamRaw);
      var jobs = $(".jobs-list");if ($(this).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");
        }
      } 
    }
  })
}

//Fetching job postings from Lever's postings API
$.ajax({
  dataType: "json",
  url: url,
  success: function(data){
    createJobs(data);
    activateButtons(data);
  }
});

Answer 1

我所做的更新如下。

• 在 jobs-team 上添加了 select 标签

• 关于createJob()

  //get select element on the element with jobs-team css class
  $('#jobs-container .jobs-teams select').append(
     //append option.
     '<option value="" class=' + teamCleanString + '>' + team + '</option>'
  );}
  

• 关于activateButtons()

  //get selected option.
  if($(this).find(":selected").hasClass(team))
  

// Replace "leverdemo" with your own company name
url = 'https://api.lever.co/v0/postings/leverdemo?group=team&mode=json'

//Functions for checking if the variable is 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; i < _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>'
       );
  }
  //'<a href="#" class="btn '+teamCleanString+'">'++'</a>'

  for(i = 0; i < _data.length; i++) {
    for (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 than 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>'  
    
      );
    }
  }
}

//Creating filter buttons for sorting your jobs
function activateButtons(_data){
  $('.jobs-teams select').on("change", function(e) {
  	e.preventDefault();
    for(i = 0; i < _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");
        }
      } 
    }
  })
}

//Fetching job postings from 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>