JavaScript命名空间和jQuery
[英]JavaScript Namespaces and jQuery
问题描述
所有。 我认为我在尝试访问JavaScript名称空间内的jQuery时遇到语法问题。 我知道代码没有错，因为当不在命名空间中时，它可以工作。 还应注意，排序功能起作用。 只是访问我的jQuery的过滤。 目前，当我尝试过滤时，它只是重新渲染表。 这是代码。 感谢您提前提出任何建议。
<!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(cats);
},
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(cats);
}
}
MYCATSPACE.SUBCAT.getData();
</script>
</body>
</html>
1 个解决方案
解决方案1
1 2015-08-21 17:10:35
您的代码在语法上没有错。 您可以使用在线语法验证器进行检查。
过滤器功能不起作用的原因是，它们没有被应用到HTML：
filterCats: function(cats, criteria){
var filteredData = cats.filter(function(c){return c.coffeePreference.toUpperCase().indexOf(criteria.toUpperCase()) === 0 ;});
// Problem Lies Here. Change cats to filteredData
MYCATSPACE.SUBCAT.renderData(cats);
},
Javascript '命名空间' 和 jQuery AJAX
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.