Question

我正在尝试将原始数据状态保存到“所有”过滤器。内容通过数据属性“数据过滤器”进行排序和过滤。因此，我的输出将是未过滤和未排序的原始状态。注意：具有相同“ data-id”的div内容将仅显示一次。

因此，我在“所有”过滤器上所需的输出以及我第一次运行代码时将是：

内容优先
内容第二
内容第三
内容第四

也 -过滤“一个”，输出将始终是“内容至上”， -过滤“两个”输出将是“内容第二”“内容第三” …等等

function removeDuplicates() {
  var content = $('.content');
  contentIds = content.map(function() {
    return $(this).data("id");
  }).toArray();
  var newSetContentIds = [...new Set(contentIds)];
  listedContent = $(newSetContentIds).map(function() {
    return $("[data-id=" + this + "]").first()[0];
  });

  listedContent.addClass('listed');
}

$('.filter').click(function() {

  var filterId = $(this).attr('data-filter');

  $('.content').hide();
  $('.content[data-filter=' + filterId + ']').addClass('active').show();

  removeDuplicates();
});

.filter-container {
  display: flex;
}

.filter-container div {
  margin: 10px;
  cursor: pointer;
}

.listed {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="filter-container">
  <div class="filter" data-filter="all">
    all
  </div>
  <div class="filter" data-filter="1">
    one
  </div>
  <div class="filter" data-filter="2">
    two
  </div>
  <div class="filter" data-filter="3">
    three
  </div>
</div>

<div class="content-container">
  <div class="content" data-filter="1" data-id="20">
    content first
  </div>
  <div class="content" data-filter="2" data-id="15">
    content second
  </div>
  <div class="content" data-filter="2" data-id="17">
    content third
  </div>
  <div class="content" data-filter="2" data-id="17">
    content third
  </div>
  <div class="content" data-filter="3" data-id="16">
    content fourth
  </div>
  <div class="content" data-filter="1" data-id="20">
    content first
  </div>
</div>

Answer 1

您的removeDuplicates函数不起作用。另外，它暗示您只想在第一次按下任何过滤器时运行此功能。

您可以使用另一个类show()来显示或隐藏div，而不是使用将行内显示与hide()类弄混的.listed和.hidden。 / p>

最后，不清楚是要在所选过滤器不是“全部”时还是一次还是每次进行排序。无论如何，如上所述，您可以对容器使用flex属性，对div使用order属性。它位于removeDuplicates内，考虑您要在第一次单击后对div全部排序。

function removeDuplicates() {

    $(".filter").off("click", removeDuplicates);

    var content = $('.content');
    contentIds = content.map(function() {
        $(this).css('order', $(this).data("filter"));
        return $(this).data("id");
    }).toArray();

    var newContentIds = contentIds.filter((a, i, aa) => aa.indexOf(a) === i && aa.lastIndexOf(a) !== i);
    listedContent = $(newContentIds).map(function() {
        return $("[data-id=" + this + "]")[0];
    });


    listedContent.addClass('listed');
}

$(".filter").on("click", removeDuplicates);

$('.filter').click(function() {

    var filterId = $(this).attr('data-filter');

    if (filterId == "all") {
        $('.content').removeClass('hidden');
        return;
    }

    $('.content').addClass('hidden');
    $('.content[data-filter=' + filterId + ']').addClass('active').removeClass('hidden');
});

.filter-container {
  display: flex;
}

.filter-container div {
  margin: 10px;
  cursor: pointer;
}

.hidden {
  display: none;
}

.content.listed {
  display: none;
}

.content-container {
  display: flex;
  flex-direction: column;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="filter-container">
  <div class="filter" data-filter="all">
    all
  </div>
  <div class="filter" data-filter="1">
    one
  </div>
  <div class="filter" data-filter="2">
    two
  </div>
  <div class="filter" data-filter="3">
    three
  </div>
</div>

<div class="content-container">
  <div class="content" data-filter="1" data-id="20">
    content first
  </div>
  <div class="content" data-filter="2" data-id="15">
    content second
  </div>
  <div class="content" data-filter="2" data-id="17">
    content third
  </div>
  <div class="content" data-filter="2" data-id="17">
    content third
  </div>
  <div class="content" data-filter="3" data-id="16">
    content fourth
  </div>
  <div class="content" data-filter="1" data-id="20">
    content first
  </div>
</div>

保存原始数据过滤器，未过滤和未排序

1 个答案: