jquery - jquery 每个 onclick 事件

Question

单击滑块后，以下代码会展开帖子的评论框。在单击滑块时，所有帖子中的所有滑块都会展开。如何扩展每个滑块帖子中的评论框以与每个滑块相关..（滑块，评论框具有 post_id 作为与其相关的 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>      

Answer 1

在这一行中，您在要展开的框中添加注释：

$('.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();
                }
            });
        });

    });

Answer 2

每个.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)
    });
});