0

目前我有以下 jQuery/Ajax 以便在用户单击 div 时加载评论：

                function showComments(post_id) {
                    $("#comment-"+post_id).toggle();
                    $.ajax({ 
                         dataType: 'html',
                         cache: false,
                         url: 'ajax.php',
                         type: 'POST',
                         data: {comments: post_id}
                    }).done(function(html) { 
                        $('#comment-'+post_id).html(html)
                    });
                }

这一切都很好，因为默认的 div 中有微调器，它会在内容加载之前显示。但是，如果用户再次单击它以隐藏它，然后单击以再次显示微调器不会出现，因为内容没有明显重置。所以我尝试使用 .toggles 鼠标事件处理程序：

                function showComments(post_id) {
                    $("#comment-"+post_id).toggle(function() {
                        $('#comment-'+post_id).show();
                        $.ajax({ 
                            dataType: 'html',
                            cache: false,
                            url: 'ajax.php',
                            type: 'POST',
                            data: {comments: post_id}
                        }).done(function(html) { 
                            $('#comment-'+post_id).html(html)
                        });   
                    }, function() {
                        $('#comment-'+post_id).hide();
                        $('#comment-'+post_id).html('<img src="/loader.gif" />')
                    });
                }

但是，这一次，没有任何效果，div 没有显示或隐藏，也没有调用 Ajax。任何想法我可能做错了什么？

编辑：

这是 HTML/PHP：

                           <div class="comments right" title="Click to view comments" onclick="showComments('.$post['id'].')">'.$post['comments_cache'].'</div>
                            <div style="display:none" id="comment-'.$post['id'].'" class="top-15"><img src="/loader.gif" /></div>

以上没有任何问题，它适用于我向您展示的第一个功能。

4

2 回答 2

1

通过执行以下操作修复它：

            function showComments(post_id) {
                if ($('#comment-'+post_id).html().length > 0) {
                    $('#comment-'+post_id).empty().hide();
                } else {
                    $('#comment-'+post_id).html('<img src="loader.gif" />').show();
                    $.ajax({ 
                         dataType: 'html',
                         cache: false,
                         url: 'ajax.php',
                         type: 'POST',
                         data: {comments: post_id}
                    }).done(function(html) { 
                        $('#comment-'+post_id).html(html)
                    }); 
                }
            }
于 2012-11-04T18:30:08.630 回答
0

您可以使用beforeSendjQuery 的属性，并'open'在 div 打开后向其添加一个类以跟踪显示。

function showComments(post_id) {
  $("#comment-" + post_id).click(function () {
    if (!$(this).hasClass('open')) {
      $.ajax({
        dataType: 'html',
        cache: false,
        beforeSend: function () {
          $(this).show().addClass('open');
        },
        url: 'ajax.php',
        type: 'POST',
        data: {
          comments: post_id
        },
        success: function (html) {
          $(this).html(html);
        }
      });
    } else {
      $(this).hide().html('<img src="/loader.gif" />').removeClass('open');
    }
  });
}
于 2012-11-04T18:30:28.630 回答