如何实现数组对含逗号分隔值的data-eventtype属性的事件筛选

我正在开发一个活动筛选器，当每个活动仅属于单一类型（例如类型"Congress"）时，基础功能运行正常。但现在活动可能属于多种类型，其data-eventtype属性值为"Congress,Hybrid"这类逗号分隔的形式。

我需要实现：检查逗号分隔的data-eventtype属性值中是否有任意一个值存在于给定的筛选数组中。例如，筛选"Congress"时，既要匹配data-eventtype="Congress"的条目，也要匹配data-eventtype="Hybrid,Congress"的条目。

当前代码实现：

$("#event_filter :checkbox").click(function() {
   doFilter();        
});


function doFilter() {
  $("#events li").hide();

  let eventtype = [];

  $("#event_filter :checkbox:checked").each(function() {
      eventtype.push($(this).val());
  });

  console.log("Eventtype: " + eventtype);

  $("#events li").filter(function() { 
      return $.inArray($(this).data("eventtype"), eventtype) != -1;
  }).show();
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<ul id="events">
   <li data-eventtype="Congress,Webinar">Event XY (Congress/Webinar)</li>
   <li data-eventtype="Hybrid,Congress">Event ABC (Hybrid/Congress)</li>
   <li data-eventtype="Congress">Event DE (Congress)</li>
   <li data-eventtype="Webinar">Event KLM (Webinar)</li>
</ul>
    
<div id="event_filter">
<input type="checkbox" value="Congress" id="cb_congress" /><label for="cb_congress">Congress</label> 
<input type="checkbox" value="Webinar" id="cb_webinar" /><label for="cb_webinar">Webinar</label>
<input type="checkbox" value="Hybrid" id="cb_hybrid" /><label for="cb_hybrid">Hybrid</label>
</div>

当前代码的问题在于直接将整个逗号分隔的字符串与筛选数组对比，无法匹配包含多个类型的活动。我们需要将活动的类型拆分为数组，再检查是否与筛选数组存在交集。

修改后的核心逻辑：

• 将活动的data-eventtype按逗号分割为数组，同时去除每个类型前后的空格（兼容带空格的格式，比如"Congress, Hybrid"）
• 使用Array.some()方法判断该数组中是否有任意元素存在于选中的筛选数组中

修改后的完整代码：

$("#event_filter :checkbox").click(function() {
   doFilter();        
});


function doFilter() {
  $("#events li").hide();

  let selectedTypes = [];

  $("#event_filter :checkbox:checked").each(function() {
      selectedTypes.push($(this).val());
  });

  console.log("Selected types: " + selectedTypes);

  // 如果没有选中任何类型，显示所有活动
  if (selectedTypes.length === 0) {
      $("#events li").show();
      return;
  }

  $("#events li").filter(function() { 
      // 将当前活动的类型拆分为数组，去除空格
      let eventTypes = $(this).data("eventtype").split(",").map(type => type.trim());
      // 检查是否有任意类型在选中数组中
      return eventTypes.some(type => selectedTypes.includes(type));
  }).show();
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<ul id="events">
   <li data-eventtype="Congress,Webinar">Event XY (Congress/Webinar)</li>
   <li data-eventtype="Hybrid,Congress">Event ABC (Hybrid/Congress)</li>
   <li data-eventtype="Congress">Event DE (Congress)</li>
   <li data-eventtype="Webinar">Event KLM (Webinar)</li>
</ul>
    
<div id="event_filter">
<input type="checkbox" value="Congress" id="cb_congress" /><label for="cb_congress">Congress</label> 
<input type="checkbox" value="Webinar" id="cb_webinar" /><label for="cb_webinar">Webinar</label>
<input type="checkbox" value="Hybrid" id="cb_hybrid" /><label for="cb_hybrid">Hybrid</label>
</div>

额外优化：增加了无选中类型时显示所有活动的逻辑，提升用户体验。

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