过滤弹出菜单答案

【问题标题】：Filtering popup menu过滤弹出菜单
【发布时间】：2021-11-20 01:39:13
【问题描述】：

一般来说，我需要制作一个选择类别的弹出菜单，一切都适合我，但有一点需要改进。

当已经选择了类别时，需要在blog-filter类中，All要改为选择的类别，我尝试了很多选项，但所有不工作的结果都是。

html

<div class="blog-filter">
    <div class="blog-filter_item active js-filter-blog-list" data-filter="all">All</div>
</div>
<div class="blog-filter-container">
<div class="container">
    <h1 class="blog-filter-title">Choose Category</h1>
    <div class="item-wrapper">
        <div class="blog-filter_item active" data-filter="all">All</div>
        @foreach($categories as $category)
        <div class="blog-filter_item" data-filter=".category_{{$category->id}}">{{ $category->title }} ({{ $category->articles_count }})</div>
        @endforeach
    </div>
</div>
</div>

@foreach ($articles as $article)
    <div class="blog-list category_{{ $article->blog_category_id }}">
            <div class="article article--left" >
                <h2 class="article_title">{{ $article->title }}</h2>
            </div>

            <div class="article article--right">
                <h2 class="article_title">{{ $article->title }}</h2>
            </div>
    </div>
@endforeach

$('.js-filter-blog-list').on('click', event => {
  const modalFilter = document.querySelector('.blog-filter-container');
  $(modalFilter).toggleClass('open');
});

document.querySelectorAll('.blog-filter_item').forEach(el => {
  el.addEventListener('click', () => {
    document
      .querySelector('.blog-filter_item.active')
      .classList.remove('active');
    el.classList.add('active');

      var dataFilter = $(el).attr('data-filter');

      if (dataFilter == 'all') {
        $('.blog-list').show();
      }
      else {
        $('.blog-list').hide();
        $(dataFilter).show();
      }
  });
});

【问题讨论】：

我觉得有点混乱，模态对话的存在有多大用处？您应该在 minimal and reproducible example 中综合您的代码 ...

标签： javascript html laravel

【解决方案1】：

解决方案：

@foreach($categories as $category)
        <div class="blog-filter_item" data-filter=".category_{{$category->id}}" value="{{ $category->title }} ({{ $category->articles_count }})>{{ $category->title }} ({{ $category->articles_count }})</div>
@endforeach

var dataFilter = $(el).attr('data-filter');
var value = $(el).attr('value');

      if (dataFilter == 'all') {
        $('.blog-list').show();
        $('.js-filter-blog-list').text('All');
      }
      else {
        $('.blog-list').hide();
        $(dataFilter).show();
        $('.js-filter-blog-list').text(value);
      }

【讨论】：