我有一个博客，每个帖子都没有详细信息页面。因此，每个博客文章都有一个页脚链接，通过jQuery ajax .load（）加载评论和评论表单;下面的代码在IE6 / 7/8中不起作用，但它在FF / Safari / Chrome中有效。 另外，我对jQuery和javascript很新，而且代码看起来很臃肿。可以减肥吗？
$("a.load-comments").livequery(function() {
$(this).click(function(){ // when you click on the link
var commentsWrapper = $(this).parent("div").parent("div").find(".comments-wrapper"); // find the right comments wrapper
var commentsFormWrapper = $(this).parent("div").parent("div").find(".comments-form-wrapper"); // find the right comments form wrapper
var commentsLoader = $(this).parent("div").parent("div").find(".comments-loader"); // find the right loader image
$(".comments-form-wrapper").fadeOut("fast"); // hide the comments form wrapper
if(!$(this).hasClass("current")) { // check if link is currently opened
$("a.load-comments, a.load-comments-form").removeClass("current"); // remove the 'current' class from all other links
$(this).addClass("current"); // add current class to this link
commentsLoader.fadeIn("fast"); // fade in the loader icon
commentsWrapper.load($(this).attr("href"), function() { // load the comments
commentsLoader.fadeOut("fast", function() { // fade out the loader image
commentsWrapper.fadeIn("fast"); // fade in the comments
});
});
} else
if($(this).hasClass("current")) { // if the link does have the class 'current'
$(this).removeClass("current"); // remove the class 'current'
commentsWrapper.fadeOut("fast"); // fade out comments
}
return false; // prevent following the link
});
});
答案 0 :(得分：1)
您可以通过仅执行一次查找并重用它们来提高效率。此外，您可能希望使用回调链接效果，以便在效果完成之前不会触发下一个操作。由于你没有定义“不工作”意味着什么，所以很难知道这是不是在绊倒你。
$("a.load-comments").livequery(function() {
$(this).click(function(){ // when you click on the link
var $this = $(this);
var $grandpa = $this.parent("div").parent("div");
var commentsWrapper = $grandpa.find(".comments-wrapper"); // find the right comments wrapper
var commentsFormWrapper = $grandpa.find(".comments-form-wrapper"); // find the right comments form wrapper
var commentsLoader = $grandpa.find(".comments-loader"); // find the right loader image
commentsFormWrapper.fadeOut("fast", function() { // hide the comments form wrapper
if(!$this.hasClass("current")) { // check if link is currently opened
$("a.load-comments, a.load-comments-form").removeClass("current"); // remove the 'current' class from all other links
$this.addClass("current"); // add current class to this link
commentsLoader.fadeIn("fast", function() { // fade in the loader icon
commentsWrapper.load($this.attr("href"), function() { // load the comments
commentsLoader.fadeOut("fast", function() { // fade out the loader image
commentsWrapper.fadeIn("fast"); // fade in the comments
});
});
});
} else { // we know that this has class "current"
$this.removeClass("current"); // remove the class 'current'
commentsWrapper.fadeOut("fast"); // fade out comments
}
});
return false; // prevent following the link
});
});
答案 1 :(得分：0)
就个人而言，我将很多内容重构为辅助方法，我不确定在实时查询中使用原型方法进行绑定是多么有效。如果你向每个博客文章周围的div添加一个ID，你可以从.parent转移到一个总是更快的ID查找，那么你就可以摆脱那些减慢速度的.finds。另外，我只是让链接调用函数而不是使用jQuery.live查找来绑定它。假设你的博客HTML看起来像这样：
<div id="blog12" class="blogpost">
....
<a href="/url/to/comments" onclick="return ToggleComments('blog12');" class="comments-link">
</div>
然后javascript将是：
function ToggleComments(blogPostId) {
var blogPost = $("#" + blogPostId);
var commentsWrapper = $("#" + blogPostId + " .comments-wrapper");
var commentsFormWrapper = $("#" + blogPostId + " .comments-form-wrapper");
var commentsLoader = $("#" + blogPostId + " .comments-loader");
var commentsLink = $("#" + blogPostId + " .comments-link");
commentsFormWrapper.fadeOut("fast", function() {
if(!blogPost.hasClass("current")) {
blogPost.addClass("current");
$("div.blogpost:not(id=" + blogPostId + ")").removeClass("current");
commentsLoader.fadeIn("fast");
commentsWrapper.load(commentsLink.attr("href"), function() {
commentsLoader.fadeOut("fast", function() {
commentsWrapper.fadeIn("fast");
});
});
} else {
blogPost.removeClass("current");
commentsWrapper.fadeOut("fast");
}
});
return false;
}
如果可以，我倾向于避免使用实时查询，除非您使用ajax.load将博客帖子添加到页面中，否则我不会理会它。
至于修复IE问题，我想知道它是否与livequery + event bind有关。希望这能解决它。
答案 2 :(得分：0)
我不确定哪个部分不适合你，但我在IE6中使用了这个：
$("a.load-comments").live('click', function(e){ // when you click on the link
e.preventDefault(); // prevent following the link
var link = $(this),
wrapper = link.parent('div').parent('div'),
commentsWrapper = wrapper.find(".comments-wrapper"),
commentsLoader = wrapper.find(".comments-loader");
$(".comments-form-wrapper").fadeOut("fast"); // hide the comments form wrapper
if(!link.hasClass("current")) { // check if link is currently opened
$("a.load-comments, a.load-comments-form").removeClass("current"); // remove the 'current' class from all other links
link.addClass("current"); // add current class to this link
commentsLoader.fadeIn("fast"); // fade in the loader icon
commentsWrapper.load(link.attr("href"), function() { // load the comments
commentsLoader.fadeOut("fast", function() { // fade out the loader image
commentsWrapper.fadeIn("fast"); // fade in the comments
});
});
} else { // if the link does have the class 'current'
link.removeClass("current"); // remove the class 'current'
commentsWrapper.fadeOut("fast"); // fade out comments
}
});
我的测试html看起来像这样：
<div>
<div>
<a class="load-comments" href="/url">click it</a>
<div class="comments-wrapper">comments wrapper</div>
<div class="comments-loader">loading....</div>
</div>
</div>
就像之前的海报所说的那样，如果你没有特别需要livequery()（我改为live()），你应该只使用click()附加一次事件
您也可以通过验证程序运行HTML - 我遇到的一些IE错误最终是由其他浏览器忽略的标记错误引起的。
祝你好运！