使用 Javascript 选择字符串（当前）和年份

Question

我正在尝试编辑我的兄弟会当前网站。目前显示的是过往的兄弟，现在我们想添加按谁活跃排序的功能。所有兄弟的名字都存储在一个数组中

var brothers = new Array();
brothers[0] = ["","john","q.","Smith","","alpha","2012-present","facebook.com/profile"];
brothers[1] = ["","antonio","","adams","","beta","1909-1911",""];
brothers[2] = ["","william","","solo","","gamma","1920-1920",""];

现在运行整个页面的脚本是 2-3 年前的一个哥哥写的（他现在没有帮助）但这是他写的脚本

var prefixIndex=0;
var firstNameIndex=1;
var middleNameIndex=2;
var lastNameIndex=3;
var suffixIndex=4;
var lineIndex=5;
var yearIndex=6;
var linkIndex=7;

var startYear=1898;
var endYear=new Date().getFullYear();

var filter_line="";
var filter_year="";
var filter_name="";

var itemsPerRow=3;
var rowsPerPage=5;

var theSpans=new Array();
var itemCount=0;

var lines=new Array();
for(var i=0;i<brothers.length;i++){
 if(!linesContains(brothers[i][lineIndex])){
  lines[lines.length]=brothers[i][lineIndex];
 }
}
lines.sort();

document.write('<div class="row search-bg">');
document.write('<div class="row"><div class="container"><div class="span12"><h3>Search by:</h3></div></div></div>');
document.write('<div class="row"><div class="container"><div class="span12"><div class="control-group"><input id="theName" type="text" placeholder="Name" onkeypress="return enterSearch(event)" /></div></div></div></div>');
document.write('<div class="row"><div class="container"><div class="span12"><div class="control-group"><select id="year"><option value="">All Years</option>');
for(var t=endYear;t>=startYear;t--){
 document.write('<option value="'+t+'">'+t+'</option>');
}
document.write('</select></div></div></div></div>');
document.write('<div class="row"><div class="container"><div class="span12"><div class="control-group"><select id="line"><option value="">All Roles</option>');
for(var t=0;t<lines.length;t++){
 document.write('<option value="'+lines[t]+'">'+lines[t]+'</option>');
}
document.write('</select></div></div></div></div>');
document.write('<div class="row"><div class="container"><div class="filter-buttons"><div class="span12"><a href="javascript:showSearching();" class="btn btn-form-submit filter-button">Search</a> <a href="javascript:clearEntries();clearResults();">Reset</a></div></div></div></div>');
document.write('</div>');
document.write('<div class="row" id="results-div"></div>');

function writeResults(){
 var resultsMessage="";
 if(filter_name.length>0){
  resultsMessage=filter_name;
 }
 if(filter_line.length>0){
  if(resultsMessage.length>0){
   resultsMessage=resultsMessage+" &amp; ";
  }
  resultsMessage=resultsMessage+filter_line;
 }
 if(filter_year.length>0){
  if(resultsMessage.length>0){
   resultsMessage=resultsMessage+" &amp; ";
  }
  resultsMessage=resultsMessage+filter_year;
 }
 if(resultsMessage.length>0){
  resultsMessage="Search results for: "+resultsMessage;
 }else{
  resultsMessage="Showing all results";
 }
 $("#results-div").html('<div class="row filter-controls"><div class="span6"><h3 id="results_message"></h3></div><div class="span6 pagination" id="pagination"></div></div><div class="row" id="results-container"></div>');
 theSpans=results();
 if(itemCount==0){
  $("#results_message").html("No results found");
 }else{
  $("#results_message").html(resultsMessage);
 }
 showPage(0);
}

function isValid(theId){
 var valid=true;
 if(filter_name.length>0){
  valid=brothers[theId][prefixIndex].toLowerCase().indexOf(filter_name.toLowerCase())>-1||brothers[theId][firstNameIndex].toLowerCase().indexOf(filter_name.toLowerCase())>-1||brothers[theId][middleNameIndex].toLowerCase().indexOf(filter_name.toLowerCase())>-1||brothers[theId][LastNameIndex].toLowerCase().indexOf(filter_name.toLowerCase())>-1||brothers[theId][suffixIndex].toLowerCase().indexOf(filter_name.toLowerCase())>-1;
 }
 if(filter_line.length>0){
  valid=filter_line.toLowerCase()==brothers[theId][lineIndex].toLowerCase();
 }
 if(filter_year.length>0){
  valid=valid&&checkYear(theId,filter_year);
 }
 return(valid);
}

function checkYear(theId,theYear){
 var isYear=false;
 theYear=parseInt(theYear)||0;
 var multiSplit=brothers[theId][yearIndex].split(";");
 for(var i=0;i<multiSplit.length;i++){
  var start=parseInt(multiSplit[i].split("-")[0])||9999;
  var end=parseInt(multiSplit[i].split("-")[1])||0;
  if(theYear>=start&&theYear<=end){
   isYear=true;
  }
 }
 return(isYear);
}

function getEntry(theId){
 var theBrother='<div class="portrait-border span'+(12/itemsPerRow)+'">';
 if(brothers[theId][linkIndex].length>0){
  theBrother=theBrother+'<a href="'+brothers[theId][linkIndex]+'">';
 }
 theBrother=theBrother+'<div class="brothers"><b>';
 if(brothers[theId][prefixIndex].length>0){
  theBrother=theBrother+brothers[theId][prefixIndex]+' ';
 }
 theBrother=theBrother+brothers[theId][firstNameIndex];
 if(brothers[theId][middleNameIndex].length>0){
  theBrother=theBrother+' '+brothers[theId][middleNameIndex];
 }
 theBrother=theBrother+' '+brothers[theId][lastNameIndex];
 if(brothers[theId][suffixIndex].length>0){
  theBrother=theBrother+' '+brothers[theId][suffixIndex];
 }
 theBrother=theBrother+'</b><br>'+brothers[theId][lineIndex]+'<br>'+brothers[theId][yearIndex];
 if(brothers[theId][linkIndex].length>0){
  theBrother=theBrother+'<br><span class="brother-link">Learn more</span>';
 }
 theBrother=theBrother+'</div>';
 if(brothers[theId][linkIndex].length>0){
  theBrother=theBrother+'</a>';
 }
 theBrother=theBrother+'</div>';
 return(theBrother);
}

function results(){
 var spans=new Array();
 var theString="";
 var spanCounter=0;
 var rowCounter=0;
 itemCount=0;
 
 for(var i=0;i<brothers.length;i++){
  if(isValid(i)){
   itemCount++;
   if(spanCounter==itemsPerRow){
    theString=theString+'</div>';
    spanCounter=0;
    if(rowCounter==rowsPerPage){
     spans[spans.length]=theString;
     theString="";
     rowCounter=0;
    }else{
     rowCounter++;
    }
   }
   if(spanCounter==0){
    theString=theString+'<div class="row">';
   }
   theString=theString+getEntry(i);
   spanCounter++;
  }
 }
 for(spanCounter;spanCounter<itemsPerRow;spanCounter++){
  theString=theString+'<div class="span'+(12/itemsPerRow)+'">&nbsp;</div>';
 }
 theString=theString+"</div>";
 spans[spans.length]=theString;
 return(spans);
}

function showPage(thePage){
 $("#results-container").html(theSpans[thePage]);
 if(theSpans.length>1){
  var thePages='<div>';
  for(var i=0;i<theSpans.length;i++){
   thePages=thePages+'<a class="filter-pagination';
   if(i==thePage){
    thePages=thePages+' active';
   }
   thePages=thePages+'" href="javascript:showPage('+i+')">'+(i+1)+'</a>';
  }
  thePages=thePages+"</div>";
  $("#pagination").html(thePages);
 }
}

function showSearching(){
 filter_name=getValue('theName');
 filter_line=$('#line').val();
 filter_year=$('#year').val();
 clearResults();
 setTimeout(writeResults,10);
}

function getValue(theId){
 var theValue=$("#"+theId).val();
 if(theValue==$("#"+theId).attr("placeholder")){
  return('')
 }else{
  return(theValue);
 }
}

function enterSearch(e) {
 var e=window.event || e;
 var keyunicode=e.charCode || e.keyCode;
 if (keyunicode == 13){
  showSearching();
 }else{
  return(true);
 }
}
function clearEntries(){
 $("#line").val("");
 $("#year").val("");
 $("#theName").val("");
}

function clearResults(){
 $("#results-div").html("");
}


function linesContains(theRole){
 for(var r=0;r<lines.length;r++){
  if(lines[r].toLowerCase()==theRole.toLowerCase()){
   return(true);
  }
 }
 return(false);
}

addLoadEvent(showSearching);

function addLoadEvent(func) { 
 var oldonload = window.onload; 
 if (typeof window.onload != 'function') { 
  window.onload = func; 
 } else { 
  window.onload = function() { 
   if (oldonload) { 
    oldonload(); 
   } 
   func(); 
  } 
 }
}

我想做的是在下拉列表中的 2015 年和所有年份之间插入一个 "Present" 选项。并允许它显示列在数组中的任何人。我确实在 SO 上做了一些搜索，但我没有真正看到任何能准确回答我问题的东西，请帮忙

Answer 1

编辑：只是想补充一点，我同意@CBroe 的观点，即单独的年份值会更好，你也可以有一个 is_active 属性

我不太清楚为什么 checkyear 在“;”上拆分因为兄弟 [x][yearIndex] 的 none 有一个 ;在里面

function checkYear(theId,theYear){

    //just get the brother's year in one var "2001-2005"
    var brothersYears=brothers[theId][yearIndex];

    //just to be clear, lets get each of the years into their own vars, even if the end is 'present'
    var start=brothersYears.split("-")[0];
    var end=brothersYears.split("-")[1];

    //if the end year is the search year then it's valid
    //works if the search year is a number, or 'present'
    if(theYear === end)
      return true;

    //if the brother's year is present, set it to the current year so we can test for it
    if(end == 'present')
      end = theYear; // can just set it to this, since if they're present, and we're searching from their start year or beyond, their end year == theYear will work

    //if it wasn't 'present' then we'll assume start, end, and theYear are ints
    return theYear >= start && theYear <= end;
}

并且您必须添加

<option value="present">Current Brothers</option>

到年份下拉菜单

使用 Javascript 选择字符串（当前）和年份

Selecting a string (present) as well as a year with Javascript

javascript

arrays

jquery

drop-down-menu