javascript - jQuery 产品数量？

Question

我在 jQuery 中创建了一个很好的字母过滤器，看起来效果很好。它正在工作:http://staging.morningsidepharm.com/products/generic-medicines/

本质上，它位于产品列表的顶部，然后在您单击某个字母时对其进行过滤。这是它使用的代码:

// Alphabetical Filter for Products

var $boxes = jQuery('.elementor-posts-container > .elementor-post');

var $btns = jQuery('.alphabet-btn').click(function() {
  var id = this.id;
  if (id == 'all') {
    $boxes.show()
  } else {
    $boxes.hide().filter(function() {
      var re = new RegExp('^' + id, 'i');
      return re.test($(this).text().trim());
    }).show()
  }
  $btns.removeClass('alphabet-active');
  $(this).addClass('alphabet-active');
});

连同此 HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="alphabet-active alphabet-btn alphabet-all" id="all">Show All</button>
<button class="alphabet-btn" id="a">A</button>
<button class="alphabet-btn" id="b">B</button>
<button class="alphabet-btn" id="c">C</button>
<button class="alphabet-btn" id="d">D</button>
<button class="alphabet-btn" id="e">E</button>
<button class="alphabet-btn" id="f">F</button>
<button class="alphabet-btn" id="g">G</button>
<button class="alphabet-btn" id="h">H</button>
<button class="alphabet-btn" id="i">I</button>
<button class="alphabet-btn" id="j">J</button>
<button class="alphabet-btn" id="k">K</button>
<button class="alphabet-btn" id="l">L</button>
<button class="alphabet-btn" id="m">M</button>
<button class="alphabet-btn" id="n">N</button>
<button class="alphabet-btn" id="o">O</button>
<button class="alphabet-btn" id="p">P</button>
<button class="alphabet-btn" id="q">Q</button>
<button class="alphabet-btn" id="r">R</button>
<button class="alphabet-btn" id="s">S</button>
<button class="alphabet-btn" id="t">T</button>
<button class="alphabet-btn" id="u">U</button>
<button class="alphabet-btn" id="v">V</button>
<button class="alphabet-btn" id="w">W</button>
<button class="alphabet-btn" id="x">X</button>
<button class="alphabet-btn" id="y">Y</button>
<button class="alphabet-btn" id="z">Z</button>

还有这个CSS:

.alphabet-btn {
  height: 30px;
  width: 30px;
  font-size: 16px;
  border-radius: 0;
  border: none;
  font-weight: 100;
  background-color: #1b91c3;
  color: #ffffff;
  padding: 0;
  text-decoration: none;
  margin: 5px 0 0 0;
}

.alphabet-btn:hover {
  background-color: #134583;
}

.alphabet-active {
  background-color: #134583;
  text-decoration: none;
}


.alphabet-all {
  width: 100px;
}

我见过一些更复杂的过滤器，当您将鼠标悬停在它们上方时，它们会提供产品计数，如下所示:

有人知道如何将此功能添加到我现有的过滤器中吗？

我想我需要一些东西来计算加载时的每个字母，然后在悬停时显示它......我什至不确定我所采取的方法是否可行？

非常感谢任何帮助:)

非常感谢!

Answer 1

您可以使用现有的基础知识在页面加载时计算每个字母的数量。

循环所有字母元素，过滤匹配的框并获取该集合的长度。然后在每个字母中附加或添加另一个元素，并添加一些样式来定位它并将其舍入等

$('.alphabet-btn').each(function() {
  var id = this.id;

  var count =  $boxes.filter(function() {
      var re = new RegExp('^' + id, 'i');
      return re.test($(this).text().trim());
    }).length

  $(this).append('<span class="count">' + count +'</span>')
});

您还可以使用它向每个框添加一个类，例如 box_a、box_c、...box_z 等，并通过查找匹配的类来简化其他过滤