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等，并只需查找匹配的类即可简化其他过滤操作