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