jQuery根据下拉框选中值显示匹配嵌套子div的实现问题求助

问题原因 #

• 原代码仅操作单个<p>标签的显隐，而非完整的产品卡片，不符合筛选显示整个匹配商品的需求
• 上下文this指向错误：筛选逻辑中$(this).show()实际指向选中的<option>元素，不是需要显示的商品节点
• 筛选判断逻辑不合理：不需要遍历所有<p>标签，只需判断每个产品卡片的品牌字段是否匹配选中值即可

修正后的jQuery代码 #

$(document).ready(function() {
  $("select").change(function() {
    // 获取选中的品牌值
    const selectedBrand = $(this).val();
    // 遍历所有产品卡片
    $("#product_box .col-xl-3.col-md-6").each(function() {
      // 选中默认选项时全部显示
      if (!selectedBrand) {
        $(this).show();
        return;
      }
      // 获取当前卡片的品牌文本
      const currentBrand = $(this).find('.overflow-hidden p:eq(0) span').text().trim();
      // 匹配则显示整个卡片，不匹配则隐藏
      currentBrand === selectedBrand ? $(this).show() : $(this).hide();
    });
  }).change();
});

补充说明 #

你的HTML结构中部分产品卡片的<div class="col-xl-3 col-md-6">节点不在#product_box容器内，建议调整HTML层级，保证所有产品卡片都在#product_box内部，否则筛选会遗漏这些节点。

内容的提问来源于stack exchange，提问作者Felix Tenn