js 或 jquery 使用药丸选择器过滤标记内容

Question

试图找出使用 jQuery（或 vanilla JS）过滤内容的正确方法。

我有药丸和html，css和js基础知识中的内容。

它在技术上是可行的，但是 jquery 代码不优雅/重复，淡入/淡出过滤效果超级笨拙而不是平滑。

我有一个 codepen 开始做对了，但是 fadeOut/In 是一团糟，特别是如果它是可见的，然后在过滤后仍然可见，就会出现奇怪的延迟和重复的 fadeout/in 发生。

代码笔 （https://codepen.io/SpacecaseArtist/pen/XWxbeev?editors=1111）

HTML：

<div class="filters">
 <button id="all" class="pill pill-selected" type="button">All</button>
 <button id="ui" class="pill" type="button">UI</button>
 <button id="ux" class="pill" type="button">UX</button>
 <button id="product" class="pill" type="button">Product</button>
</div>


<div id="case-studies">

 <div data-tag="ui ux product">
  <span>1</span>
 </div>
 <div data-tag="ui ux">
  <span>2</span>
 </div>
 <div data-tag="ui ux">
  <span>3</span>
 </div>
 <div data-tag="ux product">
  <span>4</span>
 </div>

 <div data-tag="ui product">
  <span>5</span>
 </div>
 <div data-tag="product">
  <span>6</span>
 </div>
 <div data-tag="ui">
  <span>7</span>
 </div>
 <div data-tag="ux">
  <span>8</span>
 </div>

 <div data-tag="game">
  <span>9</span>
 </div>
</div>
</div>

CSS：

body {
 background: #eee;
}

ul {
 margin-top: 2em;
}

ul li {
 border-radius: 2px;
 display: inline;
 background: #ccc;
 padding: 0.7em 1em;
 cursor: pointer;
 cursor: hand;
}

#divs {
 margin-left: 3.5em;
}

div span {
 margin: 3px;
 padding: 1em 1.5em;
 border-radius: 4px;

 color: #ffffff;
 background: #272727;
 font: bold 2em Helvetica, Arial, sans-serif;

 float: left; /* sits them next to each other */
}

.pill {
 font-size: 14px;
 font-family: system-ui;
 padding: 0.5em 1em;
 margin: 0.25em;
 border-radius: 1em;
 border: none;
 outline: none;
 background: #dddddd;
 cursor: pointer;
}

.pill:not(.pill-selected):hover {
 background: #cccccc;
}

.pill-selected {
 background: #ff0055;
 color: #ffffff;
}

JS:

document.querySelectorAll(".pill").forEach((pill) => {
 pill.addEventListener("click", () => {
  document.querySelectorAll(".pill-selected").forEach((p) => {
   p.classList.remove("pill-selected");
  });
  pill.classList.add("pill-selected");
 });
});

$("#all").click(function () {
 $("#case-studies > *").fadeOut(300, function () {
  $("#case-studies > *").fadeIn(300);
 });
});

$("#ui").click(function () {
 $("#case-studies > *").fadeOut(300, function () {
  $("[data-tag~='ui']").fadeIn(300);
 });
});

$("#ux").click(function () {
 $("#case-studies > *").fadeOut(300, function () {
  $("[data-tag~='ux']").fadeIn(300);
 });
});

$("#product").click(function () {
 $("#case-studies > *").fadeOut(300, function () {
  $("[data-tag~='product']").fadeIn(300);
 });
});

我试图让它发挥作用，但我不确定如何适当地定位带有数据标签的单张卡片以显示而其他卡片隐藏。

 $(".filters button").click(function () {
  $(".case-studies").hide();
  $(".case-studies" + $(this).attr("data-tag")).show();
 });

但我更像是一名设计师，而不是有限元专家。非常感谢任何帮助。

Answer 1

检查下面的简化代码

$('.filters').on('click', '.pill', function() {
  var $this = $(this);
  var id = $this.attr('id');
  $('.pill.pill-selected').removeClass('pill-selected');
  $this.addClass('pill-selected');
  $("#case-studies > [data-tag]").hide();
  if(id == 'all') {
    $("#case-studies > [data-tag]").fadeIn();
  } else {
    $("#case-studies > [data-tag~='" + id + "']").fadeIn();
  }
});