1
我有一個功能，目前由一個開關，這是不是很可擴展。這是一個排序功能，它可以正常工作，但爲了簡化它，它無法返回所需的數據。我只是試圖做到這一點，如果我想添加喜愛的電影或其他類別，這將是較少的工作。該工程的功能是：縮放JavaScript函數
sortData: function(cats, element, direction){
switch(element) {
case 'breed':
var sortedData = cats.sort(function(a,b){return (a.breed < b.breed) ? -1*direction : 1*direction;});
MYCATSPACE.SUBCAT.renderData(cats);
break;
case 'country':
var sortedData = cats.sort(function(a,b){return (a.country < b.country) ? -1*direction : 1*direction;});
MYCATSPACE.SUBCAT.renderData(cats);
break;
case 'coffeePreference':
var sortedData = cats.sort(function(a,b){return (a.coffeePreference < b.coffeePreference) ? -1*direction : 1*direction;});
MYCATSPACE.SUBCAT.renderData(cats);
default:
MYCATSPACE.SUBCAT.renderData(cats);
}
},
好像你可能只是做這樣的事情，因爲元素在傳遞
sortData: function(cats, element, direction){
var sortedData = cats.sort(function(a,b){return (a.element < b.element) ? -1*direction : 1*direction;});
MYCATSPACE.SUBCAT.renderData(cats);
},
但這並不正確排序。由於這個函數可以和其他一些函數一起工作，所以我會發佈下面的所有代碼。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>For the love of cats and JavaScript</title>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="filter" class="" name="filter" type="text" value="coffeePreference" onfocus="if (this.value == 'MYCATSPACE.SUBCAT.coffeePreference') {this.value = '';}" onblur="if (this.value == '') " /></br></br>
<input id="filter2" class="" name="filter2" type="text" value="breed" onfocus="if (this.value == 'breed') {this.value = '';}" onblur="if (this.value == '') " /></br></br>
<div id="catTable"></div>
<script>
var MYCATSPACE = MYCATSPACE || {};
var sortCountry;
var sortBreed;
var sortCoffee;
$('input').keyup(function(e) {
var timeout;
clearTimeout(timeout);
timeout = setTimeout(function() {
criteria = this.value;
$.getJSON('cats.json', function(cats){MYCATSPACE.SUBCAT.filterCats(cats, criteria);});
}.bind(this), 185);
});
$("#filter2").keyup(function(e) {
var timeout;
clearTimeout(timeout);
timeout = setTimeout(function() {
criteria = this.value;
$.getJSON('cats.json', function(cats){MYCATSPACE.SUBCAT.filterCats2(cats, criteria);});
}.bind(this), 185);
});
MYCATSPACE.SUBCAT = {
renderData: function(cats){
var output='<table id="indextable" border="1" cellpadding="10" cellspacing="0" style="border-collapse:collapse;">';
output+="<thead>"
output+="<tr>";
output+="<th> HeadShot </th>";
output+="<th><button onclick='MYCATSPACE.SUBCAT.getSortedBreedData()'>Breed</button></th>";
output+="<th><button onclick='MYCATSPACE.SUBCAT.getSortedCountryData()'>Country</button></th>";
output+="<th><button onclick='MYCATSPACE.SUBCAT.getSortedCoffeeData()'>CoffeePreference</button></th>";
output+="</tr>";
output+="</thead>"
for (var i in cats) {
output+="<tbody>"
output+="<tr>";
output+="<td><img src='" + cats[i].picture+"' alt='missing cat picture'></td>"
output+="<td>" + cats[i].breed + "</td>"
output+="<td>" + cats[i].country + "</td>"
output+="<td>" + cats[i].coffeePreference + "</td>"
output+="</tr>";
output+="</tbody>"
}
output+="</table>";
document.getElementById("catTable").innerHTML=output;
},
getData: function(){
$.getJSON('cats.json', function(cats) {
var cats = cats;
MYCATSPACE.SUBCAT.renderData(cats);
});
},
getSortedCountryData: function(){
$.getJSON('cats.json', function(cats) {
var cats = cats;
if (sortCountry!=true)
MYCATSPACE.SUBCAT.sortData(cats,'country',1);
else
MYCATSPACE.SUBCAT.sortData(cats,'country',-1);
sortCountry ^= true;
});
},
getSortedBreedData: function(){
$.getJSON('cats.json', function(cats) {
var cats = cats;
if (sortCountry!=true)
MYCATSPACE.SUBCAT.sortData(cats,'breed',1);
else
MYCATSPACE.SUBCAT.sortData(cats,'breed',-1);
sortCountry ^= true;
});
},
getSortedCoffeeData: function(){
$.getJSON('cats.json', function(cats) {
var cats = cats;
if (sortCountry!=true)
MYCATSPACE.SUBCAT.sortData(cats,'coffeePreference',1);
else
MYCATSPACE.SUBCAT.sortData(cats,'coffeePreference',-1);
sortCountry ^= true;
});
},
sortData: function(cats, element, direction){
switch(element) {
case 'breed':
var sortedData = cats.sort(function(a,b){return (a.breed < b.breed) ? -1*direction : 1*direction;});
MYCATSPACE.SUBCAT.renderData(cats);
break;
case 'country':
var sortedData = cats.sort(function(a,b){return (a.country < b.country) ? -1*direction : 1*direction;});
MYCATSPACE.SUBCAT.renderData(cats);
break;
case 'coffeePreference':
var sortedData = cats.sort(function(a,b){return (a.coffeePreference < b.coffeePreference) ? -1*direction : 1*direction;});
MYCATSPACE.SUBCAT.renderData(cats);
default:
MYCATSPACE.SUBCAT.renderData(cats);
}
},
filterCats: function(cats, criteria){
//var filteredData = cats.filter(function(c){return c.breed.toUpperCase().indexOf(criteria.toUpperCase()) !== -1;});
var filteredData = cats.filter(function(c){return c.coffeePreference.toUpperCase().indexOf(criteria.toUpperCase()) === 0 ;});
MYCATSPACE.SUBCAT.renderData(filteredData);
},
filterCats2: function(cats, criteria){
//var filteredData = cats.filter(function(c){return c.breed.toUpperCase().indexOf(criteria.toUpperCase()) !== -1;});
var filteredData = cats.filter(function(d){return d.breed.toUpperCase().indexOf(criteria.toUpperCase()) === 0 ;});
MYCATSPACE.SUBCAT.renderData(filteredData);
}
}
MYCATSPACE.SUBCAT.getData();
</script>
</body>
</html>
你知道你可以訪問JavaScript對象的字段括號和字符串正確理解呢？所以你可以嘗試像[元素]> b [元素] –