(jQuery)未捕获的类型错误:无法调用未定义的方法“replace”
2011-11-30
4611
$.ajax({
error: function(){alert('Error retrieving candidates from database.');},
success: function(data){
var template = ' <div class="candidate" id="candidate-$1">\r\n\
<div class="header">\r\n\
<div class="picture"><a href="$2" class="target[\'_blank\']"><img src="pictures/$1.jpg" alt="$4" /></a></div>\r\n\
<h2><a href="$2" class="target[\'_blank\']">$4</a></h2>\r\n\
<h3>$5</h3>\r\n\
<div class="stats">\r\n\
<span class="alike" title="You have $6% in common with John Galt."><span class="number">$6</span>%</span>\r\n\
<span class="similarity-graph" title="$7% of survey takers have less in common with $3 than you do; $8% of survey takers have more in common with $3 than you do.">$7,$8</span>\r\n\
<span class="certainty-graph" title="PrezMatch.com is $9% certain that John Galt is your best match.">$9</span>\r\n\
</div>\r\n\
</div>\r\n\
<div class="tabs">\r\n\
<span class="active profile-tab"><a href="javascript:;">Profile</a></span>\r\n\
<span class="keypoints-tab"><a href="javascript:;">Key points</a></span>\r\n\
</div>\r\n\
<div class="active content profile-content">\r\n\
$10\r\n\
</div>\r\n\
<div class="content keypoints-content"></div>\r\n\
</div>\r\n';
var result = '\r\n';
$(data).children().first().children().each(function(){
var temp = template;
temp = temp.replace(/\$1/g, $(this).attr('id'));
temp = temp.replace(/\$2/g, $(this).children('link').first().html());
temp = temp.replace(/\$3/g, $(this).attr('gender').toLowerCase() == 'm' ? 'him' : 'her');
temp = temp.replace(/\$4/g, $(this).children('name').first().html());
temp = temp.replace(/\$5/g, $(this).children('subtitle').first().html());
temp = temp.replace(/\$6/g, '<span class="percent-in-common"></span>');
temp = temp.replace(/\$7/g, '<span class="less-in-common"></span>');
temp = temp.replace(/\$8/g, '<span class="more-in-common"></span>');
temp = temp.repalce(/\$9/g, '<span class="percent-certain"></span>');
temp = temp.replace(/\$10/g, $(this).children('profile').first().html());
result += temp;
});
result = $(result);
$('#candidates').prepend(result);
},
url: 'data/candidates.xml'
});
我无论如何都无法诊断出这个问题。我有一个非常类似的方法,可以从 questions.xml 中获取问题,效果很好,但是这个方法会在 jquery.min.js 文件中生成错误。
有什么帮助吗?
2个回答
可能是因为您在 $9 行拼写成了“repalce”(而不是“replace”)?;-)
Jeroen
2011-11-30
我能说服您使用 Douglas Crockford 版本的 supplant 吗?使用它更容易实现您的操作。事实上,我会转换您的代码以使用它:
$.ajax({
error: function() {
alert('Error retrieving candidates from database.');
},
success: function(data) {
var template = '<div class="candidate" id="candidate-{id1}">\r\n\
<div class="header">\r\n\
<div class="picture"><a href="{id2}" class="target[\'_blank\']"><img src="pictures/{id1}.jpg" alt="{id4}" /></a></div>\r\n\
<h2><a href="{id2}" class="target[\'_blank\']">{id4}</a></h2>\r\n\
<h3>{id5}</h3>\r\n\
<div class="stats">\r\n\
<span class="alike" title="You have {id6}% in common with John Galt."><span class="number">{id6}</span>%</span>\r\n\
<span class="similarity-graph" title="{id7}% of survey takers have less in common with {id3} than you do; {id8}% of survey takers have more in common with {id3} than you do.">{id7},{id8}</span>\r\n\
<span class="certainty-graph" title="PrezMatch.com is {id9}% certain that John Galt is your best match.">{id9}</span>\r\n\
</div>\r\n\
</div>\r\n\
<div class="tabs">\r\n\
<span class="active profile-tab"><a href="javascript:;">Profile</a></span>\r\n\
<span class="keypoints-tab"><a href="javascript:;">Key points</a></span>\r\n\
</div>\r\n\
<div class="active content profile-content">\r\n\
{id10}\r\n\
</div>\r\n\
<div class="content keypoints-content"></div>\r\n\
</div>\r\n';
var result = '\r\n';
$(data).children().first().children().each(function(){
var t = $(this), temp = template.supplant({
id1: t.attr('id'),
id2: t.children('link').first().html(),
id3: t.attr('gender').toLowerCase() == 'm' ? 'him' : 'her'),
id4: t.children('name').first().html(),
id5: t.children('subtitle').first().html(),
id6: '<span class="percent-in-common"></span>',
id7: '<span class="less-in-common"></span>',
id8: '<span class="more-in-common"></span>',
id9: '<span class="percent-certain"></span>',
id10: t.children('profile').first().html()
});
result += temp;
});
$('#candidates').prepend($(result));
},
url: 'data/candidates.xml'
});
我认为这看起来更简洁。如果您想坚持使用基于 jQuery 的解决方案,您还可以查看 jQuery 模板 。
如果您使用我发布的链接中的版本,您会很高兴知道支持较新版本 ECMAScript 的浏览器将使用其内置版本覆盖它,希望能带来不错的性能提升。
此外,作为一般建议,我会将您的模板声明移到 ajax 调用之外,以便它不会在每次调用
success
时重新创建。
JesseBuesking
2011-11-30