javascript - "active"AJAX 分页中的类不起作用

Question

我对 ajax 和 javascript 很陌生，当单击按钮时如何给出 class='active'。

这是我的代码:

$(document).ready(function(){
    load_data();
        function load_data(pages)
        {
            var id=<?php echo $id; ?>;
            $.ajax({
                url:"includes/komentar-ajax.php?id="+id,
                method:"POST",
                data:{page:pages},
                success:function(data){
                    $('#pagination_data').html(data);
                }
            })
        }

        $(document).on('click','.page-link', function(){
            if ($(this).hasClass('active')) {
                $(this).removeClass('active');
            } else {
                $(this).addClass('active');
            }
            var pages = $(this).attr("id");
            load_data(pages);
        });
});

Answer 1

在你的ajax成功函数中，设置$('#pagination_data') html后，你可以设置你的事件状态。

首先从所有 .page-link 按钮中删除事件类，然后将事件类设置为您想要的类。

您的代码将如下所示:

   $.ajax({
            url:"includes/komentar-ajax.php?id="+id,
            method:"POST",
            data:{page:pages},
            success:function(data){
                $('#pagination_data').html(data);
                // remove active class from other buttons
                $('.page-link').removeClass("active");
                // add active class to your button 
                $("#"+id).closest(".page-item").addClass('active');
            }
        })

请记住，将页面作为 .page-link 按钮的 id 传递可能会导致 id 重复，并且事情将停止工作。我建议您使用数据属性在 html 元素中存储此类信息。