javascript jquery过滤器出错，显示所有结果

31moq8wy 于 2023-02-11 发布在 Java

关注(0)|答案(2)|浏览(175)

我有几个divs，我尝试根据一些下拉列表过滤器来过滤它们，我使用data-product_cost=true属性来列出它们，所以如果我在下拉列表中选择product_cost，所有具有product_cost=true属性的产品div都会显示在列表中，而其他的不会。
从"Kontogebühren"下拉列表中，如果选择"Kostenlose Kontoführung"，则当前显示所有卡。对于"Kostenlose Kontoführung"选项选择，应仅显示N26、Comdirect和DKB卡。
//选择标签

jQuery(document).ready(function($) {

  jQuery("#products-filter").change(function() {
    filtering_vergleiche();
  });

  filtering_vergleiche();

  function filtering_vergleiche() {

    var choosen_filter = [];
    jQuery('.product-item').removeClass('filter_hidden');
    jQuery('.filter_no_results').remove();

    jQuery('.products-filter select option:selected').each(function(index) {

      var current_filter_name = jQuery(this).attr('name');

      var current_filter_value = jQuery(this).attr('value');

      //Create object with all necessary info
      choosen_filter.push({
        "name": current_filter_name,
        "value": current_filter_value
      });
    });
    count_item = 0;
    count_hidden = 0;
    jQuery('.product-item').each(function(index) {
      for (var i = 0; i < choosen_filter.length; ++i) {
        choosen_filter_item = choosen_filter[i];
        choosen_filter_name = choosen_filter_item.name;
        choosen_filter_value = choosen_filter_item.value;

        filter_value_on_product = jQuery(this).attr('data-' + choosen_filter_name);

        if (choosen_filter_value != 'alle') {
          if (filter_value_on_product.indexOf(',') > -1) {
            let segments = filter_value_on_product.split(',').map(element => element.trim());;
            if (!segments.includes(choosen_filter_value)) {
              jQuery(this).addClass('filter_hidden');
            }
          } else if (filter_value_on_product != choosen_filter_value) {
            jQuery(this).addClass('filter_hidden');
          }
        }
      }
      count_item++;
    });

    jQuery('.product-item.filter_hidden').each(function(index) {
      count_hidden++;
    });

    //Nachricht anzeigen wenn keine Produkte gefunden wurden
    if (count_hidden == count_item) {
      jQuery("<p class='filter_no_results'>Zu dieser Auswahl wurden leider keine Ergebnisse gefunden.<br>Bitte andere Kriterien auswählen.<p>").appendTo('.product-item-listing');
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<body>
  <select id="filter_checkboxes" class="vergleich_select" size="1" name="term">
    <option id="filter_all" name="filter_alle" value="alle">
      Alle
    </option>
    <option id="product_cost" name="product_cost" value="true">
      Kostenlose Kontoführung
    </option>
    <option id="incentive" name="incentive" value="true">
      Mit Startguthaben
    </option>
  </select>
  <div class="product-item" data-incentive="false" data-partnercard="false" data-atm_euro_fee="false" data-atm_international_fee="false" data- incoming_pm_min="true" data-product_cost="true">
    N26
  </div>
  <div class="product-item " data-incentive="false" data-partnercard="true" data-atm_euro_fee="true" data-atm_international_fee="true" data- incoming_pm_min="false" data-product_cost="true">
    ComDirect
  </div>
  <div class="product-item" data-incentive="false" data-partnercard="true" data-atm_euro_fee="true" data-atm_international_fee="true" data- incoming_pm_min="false" data-product_cost="true">
    DKB
  </div>

  <div class="product-item" data-incentive="true" data-partnercard="true" data-atm_euro_fee="true" data-atm_international_fee="false" data-incoming_pm_min="false" data-product_cost="true">
    Revolut
  </div>
  </div>
</body>
</html>

我似乎找不到filtering_vergleiche()函数中的错误，因为我是jQuery的新手。

JavaScript

来源：https://stackoverflow.com/questions/75404832/jquery-filter-is-faulty-and-shows-all-results

2条答案

按热度按时间

2mbi3lxu1#

问题出在你的选择器上。
.change()处理程序应该在'jQuery（"#filter_checkboxes"）上。
获取选项值的循环应使用jQuery("#filter_checkboxes option:selected")。
您需要.filter_hidden的CSS来隐藏元素。

jQuery(document).ready(function($) {

  jQuery("#filter_checkboxes").change(function() {
    filtering_vergleiche();
  });

  filtering_vergleiche();

  function filtering_vergleiche() {

    var choosen_filter = [];
    jQuery('.product-item').removeClass('filter_hidden');
    jQuery('.filter_no_results').remove();

    jQuery('#filter_checkboxes option:selected').each(function(index) {

      var current_filter_name = jQuery(this).attr('name');

      var current_filter_value = jQuery(this).attr('value');

      //Create object with all necessary info
      choosen_filter.push({
        "name": current_filter_name,
        "value": current_filter_value
      });
    });
    count_item = 0;
    count_hidden = 0;
    jQuery('.product-item').each(function(index) {
      for (var i = 0; i < choosen_filter.length; ++i) {
        choosen_filter_item = choosen_filter[i];
        choosen_filter_name = choosen_filter_item.name;
        choosen_filter_value = choosen_filter_item.value;

        filter_value_on_product = jQuery(this).attr('data-' + choosen_filter_name);

        if (choosen_filter_value != 'alle') {
          if (filter_value_on_product.indexOf(',') > -1) {
            let segments = filter_value_on_product.split(',').map(element => element.trim());;
            if (!segments.includes(choosen_filter_value)) {
              jQuery(this).addClass('filter_hidden');
            }
          } else if (filter_value_on_product != choosen_filter_value) {
            jQuery(this).addClass('filter_hidden');
          }
        }
      }
      count_item++;
    });

    jQuery('.product-item.filter_hidden').each(function(index) {
      count_hidden++;
    });

    //Nachricht anzeigen wenn keine Produkte gefunden wurden
    if (count_hidden == count_item) {
      jQuery("<p class='filter_no_results'>Zu dieser Auswahl wurden leider keine Ergebnisse gefunden.<br>Bitte andere Kriterien auswählen.<p>").appendTo('.product-item-listing');
    }
  }
});

.filter_hidden {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<body>
  <select id="filter_checkboxes" class="vergleich_select" size="1" name="term">
    <option id="filter_all" name="filter_alle" value="alle">
      Alle
    </option>
    <option id="product_cost" name="product_cost" value="true">
      Kostenlose Kontoführung
    </option>
    <option id="incentive" name="incentive" value="true">
      Mit Startguthaben
    </option>
  </select>
  <div class="product-item" data-incentive="false" data-partnercard="false" data-atm_euro_fee="false" data-atm_international_fee="false" data- incoming_pm_min="true" data-product_cost="true">
    N26
  </div>
  <div class="product-item " data-incentive="false" data-partnercard="true" data-atm_euro_fee="true" data-atm_international_fee="true" data- incoming_pm_min="false" data-product_cost="true">
    ComDirect
  </div>
  <div class="product-item" data-incentive="false" data-partnercard="true" data-atm_euro_fee="true" data-atm_international_fee="true" data- incoming_pm_min="false" data-product_cost="true">
    DKB
  </div>

  <div class="product-item" data-incentive="true" data-partnercard="true" data-atm_euro_fee="true" data-atm_international_fee="false" data-incoming_pm_min="false" data-product_cost="true">
    Revolut
  </div>
  </div>
</body>
</html>

赞(0）回复(0）举报 2023-02-11

krugob8w2#

我想我明白你的意思了。我修复了很多语法问题A-把HTML放在HTML验证器中就可以看到了。
这里我添加了几个选项，以便在选择时更加直观（我将其更改为multiple，以便您可以选择多个选项）
我使用颜色和数据属性来显示所选择的内容。

jQuery(function($) {
  $("#filter_select").on('change', filtering_vergleiche).first().trigger('change');
  //triggered instead of calling: filtering_vergleiche();

  function filtering_vergleiche(event) {
    let choosen_filter = [];
    $('.product-item').each(function() {
      this.dataset.chosen = "false";
    });
    let $choices = $(this).find('option:selected');
    $('.product-item').removeClass('filter_hidden');
    $('.product-item-listing').find('.filter_no_results').remove();
    // nothing picked so get out of here
    if (!$choices.length) {
      return;
    }
    $choices.each(function(index) {
      choosen_filter.push({
        "name": $(this).attr('name'),
        "value": $(this).attr('value')
      });
    });
    let $products = $('.product-item');
    let count_item = $products.length; //0;
    let count_hidden = 0;
    $products.each(function(index) {
      let isChoice = this.dataset.chosen == "true";
      // we already chose it so go to next one
      if (isChoice) return;
      for (var i = 0; i < choosen_filter.length; ++i) {
        let choosen_filter_item = choosen_filter[i];
        let choosen_filter_name = choosen_filter_item.name;
        let choosen_filter_value = choosen_filter_item.value;

        let filter_value_on_product = $(this).data(choosen_filter_name);
        filter_value_on_product = filter_value_on_product || $(this).data('choice') == choosen_filter_value;
        this.dataset.chosen = this.dataset.chosen == "true" || choosen_filter_value == 'alle' || filter_value_on_product ? "true" : "false";
      }
    });
    let hiddenOnes = $('.product-item').filter('.filter_hidden');
    count_hidden = hiddenOnes.length;
    if (count_hidden == count_item) {
      $("<p class='filter_no_results'>Zu dieser Auswahl wurden leider keine Ergebnisse gefunden.<br>Bitte andere Kriterien auswählen.<p>").appendTo('.product-item-listing');
    }
  }
});

.filter_hidden {
  border: solid green 1px;
}

.vergleich_select {
  height: 6rem;
}

.product-item-listing {
  margin-top: 1rem;
  border: solid 1px red;
}

.product-item[data-chosen="true"] {
  background-color: #ddffdd44;
}

.product-item[data-chosen="false"] {
  background-color: #ddddff44;
}

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

<select id="filter_select" class="vergleich_select" size="1" name="term" multiple>
  <option name="filter_alle" value="alle" data-choice="all">
    Alle (All)
  </option>
  <option name="product_cost" value="true" data-choice="product_cost">
    Kostenlose Kontoführung (Free Account Management)
  </option>
  <option name="incentive" value="true" data-choice="incentive">
    Mit Startguthaben (With starting credit)
  </option>
  <option name="incoming_pm_min" value="true" data-choice="incoming_pm_min">
    incoming_pm_min = true
  </option>
  <option name="incentive" value="true" data-choice="partnercard">
    partnercard = true
  </option>
  <option name="incentive" value="true" data-choice="atm_international_fee">
    atm_international_fee = true
  </option>
</select>

<div class="product-item" data-incentive="false" data-partnercard="false" data-atm_euro_fee="false" data-atm_international_fee="false" data-incoming_pm_min="true" data-product_cost="true">N26</div>
<div class="product-item " data-incentive="false" data-partnercard="true" data-atm_euro_fee="true" data-atm_international_fee="true" data-incoming_pm_min="false" data-product_cost="true">ComDirect</div>
<div class="product-item" data-incentive="false" data-partnercard="true" data-atm_euro_fee="true" data-atm_international_fee="true" data- incoming_pm_min="false" data-product_cost="true">DKB</div>
<div class="product-item" data-incentive="true" data-partnercard="true" data-atm_euro_fee="true" data-atm_international_fee="false" data-incoming_pm_min="false" data-product_cost="true">Revolut</div>
<div class="product-item-listing">empty</div>

赞(0）回复(0）举报 2023-02-11

我来回答

javascript jquery过滤器出错，显示所有结果

2条答案

相关问题

热门标签

最新问答