包含jQuery的JavaScript名称空间
[英]JavaScript namespaces that include jQuery
问题描述
好的，所以逗号已修复！ 谢谢！ 我还有一个问题。 我的jQuery似乎坏了。 其他一切正常。 当我将jQuery放在SUBCAT中时，它就会中断。 我很确定这是一个语法错误。 这是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>
2 个解决方案
解决方案1
2 已采纳 2015-08-21 13:34:09
您在对象中缺少逗号。 如果您显示对象的准系统，则显而易见：
MYCATSPACE.SUBCAT = {
renderData: function(cats) {
// Code...
}, // <- Missing comma
getData: function() {
// Code...
}
}
解决方案2
1 2015-08-21 13:33:58
您只需要更正丢失的'，'，在下面的示例中，我已按预期避免了您的ajax调用及其工作
var MYCATSPACE = MYCATSPACE || {}; 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='getSortedBreedData()'>Breed</button></th>"; output+="<th><button onclick='getSortedCountryData()'>Country</button></th>"; output+="<th><button onclick='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; }, // MISSING COMMA HERE getData: function(){ //$.getJSON('cats.json', function(cats) { // var cats = cats; var cats = [{ picture: '', breed: 'apple', country: 'ITA', coffeePreference: 'pip' }]; MYCATSPACE.SUBCAT.renderData(cats); //} //); }, } MYCATSPACE.SUBCAT.getData();
<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 == '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>
Javascript '命名空间' 和 jQuery AJAX
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.