-1

次のコードは、スライダーがクリックされると投稿のコメント ボックスを展開します。スライダーをクリックすると、すべての投稿のすべてのスライダーが展開されます。各スライダー投稿のコメントボックスを展開して、各スライダーに関連付けるにはどうすればよいですか.. (スライダー、コメントボックスには、それに関連する ID として post_id があります)

    $(document).ready(function(){

            $(".comment_box").hide();


        $('.slider').on('click',function(){
            var msg = '#message';
            var postID = $(this).attr('id').replace('post_', '');
            $.ajax({
                url: 'auth/classes/comments.php',
                type: 'GET',
                data: 'post_id='+postID,
                success: function(data) {
                    $(msg).val('');
                    $(msg).css('height','14px');
                    $('.commentscontainer_'+postID).append(data);
                    $('.time').timeago();
                }
            });
        $(".comment_box").slideToggle();
        });

    });

HTMLはこんな感じ（ループ内だったので）

<div class="slider" id="post_['post_id']">&nbsp;</div></span></span>
<div class="comment_box" 'id="['post_id']">'
<div class="commentscontainer_['post_id']">
</div>
</div>
4

2 に答える 2

0

この行で、展開するボックスにコメントを追加します。

$('.commentscontainer_'+postID).append(data);

私が正しければ、「comment_box」は「.commentscontainer_XX」のコンテナです。

したがって、「comment_box」クラス名で最も近い親を選択できます

$('.commentscontainer_'+postID).append(data).closest(".comment_box").slideDown();

関数の最後にある $(".comment_box").slideToggle() の代わりに。

関数全体は次のようになりました。

$(document).ready(function(){

            $(".comment_box").hide();


        $('.slider').on('click',function(){
            var msg = '#message';
            var postID = $(this).attr('id').replace('post_', '');
            $.ajax({
                url: 'auth/classes/comments.php',
                type: 'GET',
                data: 'post_id='+postID,
                success: function(data) {
                    $(msg).val('');
                    $(msg).css('height','14px');
                    $('.commentscontainer_'+postID).append(data).closest(".comment_box").slideDown();
                    $('.time').timeago();
                }
            });
        });

    });
于 2013-09-15T18:41:54.693 に答える
0

それぞれがすでに変数に持って.comment_boxいる IDを持っています:['post_id']

$(document).ready(function(){
    $(".comment_box").hide();

    $('.slider').on('click',function(){
        var postID = this.id.replace('post_', '');
        $.ajax({
            url : 'auth/classes/comments.php',
            data: {post_id: postID}
        }).done(function(data) {
            $('#message').val('').css('height','14px');
            $('.commentscontainer_'+postID).append(data);
            $('.time').timeago();
        });
        $('#' + postID).slideToggle();
    });
});

編集：

スライドダウン時にのみ ajax 呼び出しを行うには、コールバックを待って要素が表示されているかどうかを確認するか、次のようにフラグを使用できます。

$(document).ready(function(){
    $(".comment_box").hide();

    $('.slider').on('click',function(){
        var flag   = $(this).data('flag'),
            postID = this.id.replace('post_', '');

        $('#' + postID).slideToggle();

        if (!flag) {
            $.ajax({
                url : 'auth/classes/comments.php',
                data: {post_id: postID}
            }).done(function(data) {
                $('#message').val('').css('height','14px');
                $('.commentscontainer_'+postID).append(data);
                $('.time').timeago();
            });
        }
        $(this).data('flag', !flag)
    });
});
于 2013-09-15T18:45:52.620 に答える