时间戳

首页 > 解决方案 > 使用 detach() 过滤类别

javascript - 使用 detach() 过滤类别

问题描述

帮助我分离（）函数。

我知道它是如何工作的，但我需要帮助来应用它，在我的例子中，它现在删除了所有选定的类别，但你需要做相反的事情，以便删除除选定类别之外的所有类别。是否有必要以某种方式将除所选内容之外的所有内容放入一个类中并使用 detach() 还是更好的方法？

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>

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

js

var divs;
    
$('.blog-article').each(function(i){
  $(this).data('initial-index', i);
});

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

      $(divs).appendTo('.blog-list').each(function(){
        var oldIndex = $(this).data('initial-index');
          $('.blog-article').eq(oldIndex).before(this);
        });
      divs = null;

      if (dataFilter == 'all') {
        $('.blog-article').show();
      }
      else {
        divs = $(dataFilter).detach();
        $('.blog-article').show(); 
      }
  });
});

标签： javascripthtmllaravel

解决方案

解决方案：

divs = $('.blog-article').not(dataFilter).detach();

推荐阅读