0

現時点では、ユーザーが div をクリックしたときにコメントを読み込むために、次の jQuery/Ajax を使用しています。

                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

jQueryのプロパティを使用して、表示を追跡するために開いたら div にbeforeSendクラスを追加できます。'open'

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 に答える