jQuery筛选功能异常：选中指定选项后仍显示全部产品卡片

核心问题 #

你的代码存在两处关键选择器不匹配的问题，导致筛选逻辑完全没执行：

• 事件监听的元素ID不匹配：JS里监听的是#products-filter元素的change事件，但HTML里下拉框的ID是filter_checkboxes，下拉选择时根本触发不了筛选函数。
• 选中选项的选择器错误：代码用.products-filter select option:selected获取选中选项，但HTML里没有带.products-filter类的父元素，导致choosen_filter数组始终为空，筛选逻辑直接跳过，所有产品都显示。

另外还有变量未声明（污染全局作用域）、部分data属性带多余空格的细节问题。

修复后的代码 #

JavaScript 部分

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

  // 修正选择器，匹配HTML中的select ID
  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();

    // 修正选择器，直接通过select ID获取选中选项
    jQuery('#filter_checkboxes option:selected').each(function(index) {

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

      choosen_filter.push({
        "name": current_filter_name,
        "value": current_filter_value
      });
    });
    
    // 声明变量，避免全局污染
    let count_item = 0;
    let count_hidden = 0;
    
    jQuery('.product-item').each(function(index) {
      for (var i = 0; i < choosen_filter.length; ++i) {
        const choosen_filter_item = choosen_filter[i];
        const choosen_filter_name = choosen_filter_item.name;
        const choosen_filter_value = choosen_filter_item.value;

        const 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++;
    });

    count_hidden = jQuery('.product-item.filter_hidden').length; // 简化计数方式

    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('body'); // 可替换为实际列表容器，比如.product-item-listing
    }
  }
});

HTML 部分

<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>
  <!-- 修正data属性的多余空格 -->
  <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>
  <!-- 按需求将Revolut的data-product_cost改为false，选择Kostenlose Kontoführung时会隐藏它 -->
  <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="false">
    Revolut
  </div>
</body>
</html>

额外说明 #

• 按需求修改了Revolut的data-product_cost属性值，确保选择“Kostenlose Kontoführung”时仅显示N26、Comdirect和DKB。
• 简化了隐藏元素的计数逻辑，直接用length获取数量更高效。
• 给所有未声明的变量添加了声明，避免全局作用域污染。

内容的提问来源于stack exchange，提问作者Exodus Reed