如何基于data-id多参数实现Div过滤？现有代码失效问题排查

你的代码存在三个关键错误，导致无法正确过滤包含多参数的元素：

• 数据属性名不匹配：HTML中定义的是data-id属性，但JS里错误调用了$(this).data('view')，根本取不到目标属性的值。
• 匹配逻辑错误：直接用==做全等判断，只能匹配和$param完全一致的data-id值，无法识别逗号分隔的多参数列表里的目标值。
• filter返回值无效：当$param为'0'时返回'*'是错误的，filter函数要求返回布尔值，这里应该返回true来保留所有元素。

修正后的完整代码如下：

<div class="sgmt" data-id="orange, apple">First one</div>  
<div class="sgmt" data-id="onion, apple">Second one</div>  
<div class="sgmt" data-id="onion, grape">Third one</div>

<script>  
const $param = "orange";

$('.sgmt').filter(function() {   
  if ($param === '0') {      
    return true; // 返回true，所有元素都会被选中
  } else {      
    // 处理data-id的值：去除空格后分割为数组，检查是否包含目标参数
    const idList = $(this).data('id').replace(/\s+/g, '').split(',');
    return idList.includes($param);
  }  
}).addClass("sgmt-show");  
</script>

修正说明 #

1. 修正属性名：将data('view')改为data('id')，与HTML中的data-id对应。
2. 优化匹配逻辑：先移除data-id值中的所有空格（避免逗号前后的空格干扰匹配），再分割成数组，用includes()方法判断目标参数是否在列表内。
3. 修正返回值：当需要显示所有元素时，返回true而非无效的'*'。

内容的提问来源于stack exchange，提问作者Sergei Shumailov