javascript - 在产品过滤器旁边显示正确的计数

Question

我正在开发一个网上商店产品过滤器，它几乎可以工作了。过滤器效果很好，但它旁边的计数不是，它显示 0 而它应该显示正确的计数。

显示计数的代码几乎可以完美运行，但特定场景中的计数是错误的。

实时页面：https ://www.technicomponents.nl/nl/p/pneumatiek/insteekkoppelingen/knie-koppelingen/

如果您从第 2 个类别中选择 2 个项目并从第 3 个类别中选择 1 个（具有匹配的属性），则过滤器将起作用。然而，计数显示 0，而在这种情况下，它应该显示 1。

$("input").change(function() {

  var filters = {}; // key/value per group
  var group = '';
  var groupnr = 1; // create the var that tracks how many filter groups are active
  var groupid = ''; // last group id, used to make count work when selecting from 1 filter group

  $(':input:checked,select').each(function(index, el) {

    // set group, if empty group wasn't set yet
    if (group == '') {
      group = $(el).data("id");
      groupid = group;
    } else {
      // if checkbox from multiple groups are checked
      if (group != $(el).data("id"))

      {
        group = $(el).data("id");
        groupid = group;
        groupnr = 2;
      }
    }

    filters[group] = (filters[group] || []).concat("." + el.value);

  });

  var $filtered = $(".vis-products").hide();
  // Apply each filter on the result of the previous one:
  for (var group in filters) $filtered = $filtered.filter(filters[group].join(","));
  $filtered.show();

  // create a string of the currently checked checkboxes
  var str = $(':input:checked').map(function() {
    return this.value;
  }).get().join(".");


  // show count next to filter options and disable/grey-out options
  $('.choice_form').each(function(el) {

    // loop through every choice option
    // then count how many products have all the checked products

    if ($(this).val() != '')

    {

      // add a . if needed
      if (str.substring(0, 1) != '.' && str != '') {
        str = '.' + str + '';
      }

      // if we we have 1 group selected and this option is from that group
      var total = 0;
      if (groupnr != 2 && $(this).attr("data-id") == groupid) {
        total = $('.' + $(this).val() + '').length;
      } else {
        total = $('.' + $(this).val() + '' + str + '').length;
      }

      // set count html
      $('.' + $(this).val() + '-choice').html('(' + total + ')');

      // if 0, grey-out the option
      if (total == 0)

      {
        if (groupnr == 2)

        {
          $('.dis' + $(this).val() + '-choice').addClass('default-lightgray');
          $('.' + $(this).val() + '-choice').addClass('default-lightgray');
        }
      } else {
        $('.dis' + $(this).val() + '-choice').removeClass('default-lightgray');
        $('.' + $(this).val() + '-choice').removeClass('default-lightgray');
      }

    }

  });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class="filter">
  Cat 1:<br>
  <input type="checkbox" data-id="1" value="a">a <span class="ft-choice"></span><br>
  <input type="checkbox" data-id="1" value="b">b <span class="ft-choice"></span><br> Cat 2:<br>
  <input type="checkbox" data-id="2" value="i">i <span class="ft-choice"></span><br>
  <input type="checkbox" data-id="2" value="j">j <span class="ft-choice"></span><br>
  <input type="checkbox" data-id="2" value="k">k <span class="ft-choice"></span><br> Cat 1:<br>
  <input type="checkbox" data-id="3" value="x">x <span class="ft-choice"></span><br>
  <input type="checkbox" data-id="3" value="y">y <span class="ft-choice"></span><br>
</div>
Data:<br>
<div class="vis-products a i x">a i x</div>
<div class="vis-products a i y">a i y</div>
<div class="vis-products a j x">a j x</div>
<div class="vis-products a j y">a j y</div>
<div class="vis-products a k x">a k x</div>
<div class="vis-products a k y">a k y</div>
<div class="vis-products b i x">b i x</div>
<div class="vis-products b i y">b i y</div>
<div class="vis-products b j x">b j x</div>
<div class="vis-products b j y">b j y</div>
<div class="vis-products b k x">b k x</div>
<div class="vis-products b k y">b k y</div>

标签： javascriptjquerycss