Question

我有一个菜单，只显示6个类别。单击某个类别时，会发出ajax请求以获取所单击类别的所有帖子。

但是还有一个链接“所有类别”，点击它时会显示一个包含所有类别的模态。单击模态中的类别时，我想在菜单中将此项目作为活动项目。但它没有使用"$('#showCategories').addClass('active');“。你知道为什么吗？

 <ul class="Categories__Menu">
    @foreach($categories->take(6) as $category)
        <li class="active">
            <a href="#" name="category" id="{{$category->id}}" href="#">{{$category->name}}</a>
        </li>
    @endforeach
    <li><a  data-toggle="modal" id="showCategories" data-target=".bd-example-modal-lg" href="">All Categories</a></li>
</ul>

显示所有类别的模态代码：

 <div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
                <div class="modal-body">
                    <ul class="modal-list row">
                        <li class="col-lg-4 col-md-6 col-sm-12">
                            <a class="">All Categories</a>
                        </li>
                        @foreach($categories as $category)
                            <li class="col-lg-4 col-md-6 col-sm-12">
                                <img src="{{ $category->image }}"/>
                                <a name="category" id="{{$category->id}}">{{$category->name}}</a>
                            </li>
                        @endforeach
                    </ul>
                </div>
            </div>
        </div>
    </div>

jQuery的：

$(function() {
    $("a[name='category']").on('click', function(){

         $('#showCategories').html($(this).text()+' <i class="fa fa-caret-down" aria-hidden="true"></i>');
        $('#categoriesModal').modal('hide');
        $('#showCategories').addClass('active');

        var category_id = $(this).attr("id");
        $('.Categories__Menu li').removeClass('ative');
        $(this).parent('li').addClass('ative');
        $.ajax({
            url: '{{ route('category.posts',null) }}/' + category_id,
            type: 'GET',
            success:function(result){
                $('#posts').empty();
                var newPosts='';
                var placeholder = "{{route('posts.show', ['id' => '1', 'slug' => 'demo-slug'])}}";
                $.each(result, function(index, post) {
                    var url = placeholder.replace(1, post.id).replace('demo-slug', post.slug);

                    newPosts += '<div class="col-12 col-sm-6 col-lg-4 col-xl-3 mb-4">\n' +
'                        <div class="card box-shaddow">\n' +
'                            <img class="card-img-top" src='+ post.image +' alt="Card image cap">\n' +
'                            <div class="card-body">\n' +
'                                <h5 class="card-title h6 font-weight-bold text-heading-blue">'+post.title+'</h5>\n' +
'                            </div>\n' +
'                    </div></div>';
                });
                $('#posts').html(newPosts);
            },
            error: function(error) {
                console.log(error.status)
            }
        });
    });
});

Answer 1

<a  data-toggle="modal" id="showCategories" data-target=".bd-example-modal-lg" href="">All Categories</a>

和

$('#showCategories').addClass('active');

添加课程＆＃34;活跃＆＃34;到那个链接。它只是打开模态的链接。我认为你使用的是错误的ID。

为什么点击的类别不会保持活动类？

1 个答案: