javascript - 仅将事件类添加到单击的类别

Question

我有一个包含一些帖子类别的菜单:

<ul>
    @foreach($categories->get() as $category)
        <li class="ative">
            <a href="#" name="category" id="{{$category->id}}">{{$category->name}}</a>
        </li>
    @endforeach
</ul>

当我点击类别(例如 ID 为“1”的类别)时，它会通过菜单显示在 #posts div 中属于 ID 为“1”的类别的帖子。

问题:

它工作正常，问题是起初我想要第一个类别为“active”。但是，当单击另一个类别时，我想显示该类别处于事件状态的单击类别。但不是那样工作的，当访问页面时，所有类别都处于事件状态，并且当单击另一个类别时，所有类别都处于事件状态。您知道如何解决这个问题吗？

#posts div 显示最初访问页面时的最新帖子:

    <div id="posts">
    @foreach($posts as $key => $post)
    <div id="post" + {{$key}}>
         <img src="{{$post->image}}">
        <h1>{{$post->title}}</h1>
        <!-- ... -->
    </div>
    @endforeach
</div>

jQuery 代码:

$("a[name='category']").on('click', function(){ 
    //tried this by given answer which not worked 
    var category_id = $(this).attr("id"); 
    ('.categories li').removeClass('active'); 
    $(this).addClass('active'); 
    //ended code 

    $.ajax({
        url: '{{ route('category.posts',null) }}/' + category_id,
        type: 'GET',
        success:function(result){ 
            $('#posts').empty(); 
            var newPosts = ""; 
            $.each(result, function(index, post) { 
                newPosts += '<img src="' + post.image + '">' + + '<h1>' + post.title + '</h1>';
            }); 
            $('#posts').html(newPosts); 
        }, error: function(error) { 
            console.log(error.status) 
        } 
    }); 
});

Answer 1

您需要在click 事件处理程序中添加两行jquery 代码

$('ul li').removeClass('active');// remove active class from li
$(this).parent('li').addClass('active');  // add active class to current clicked li