Question

我有一个博客，每个帖子都没有详细信息页面。因此，每个博客文章都有一个页脚链接，通过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
    });
});

Answer 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 
    });
});

Answer 2

就个人而言，我将很多内容重构为辅助方法，我不确定在实时查询中使用原型方法进行绑定是多么有效。如果你向每个博客文章周围的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有关。希望这能解决它。

Answer 3

我不确定哪个部分不适合你，但我在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错误最终是由其他浏览器忽略的标记错误引起的。

祝你好运！

jQuery ajax .load（）无法在IE6 / IE7 / IE8中运行 - 在FF / Safari / Chrome中工作

3 个答案: