针对数组过滤逗号分隔的数据属性

Question

我正在为即将发生的事件构建一个过滤器，并且我已经准备好通用功能，只要每个事件都是单一类型（比如说：输入“congress”），它就可以完美运行。 但是现在，可能会有多种类型的事件，其值类似于“congress,hybrid”。 所以我需要检查一个逗号分隔的数据属性中的一个值是否是给定数组的一部分。 我怎样才能做到这一点？

样本：

<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>

再一次，我当前的过滤器基于以前的方法，其中每个事件只能有一个 EVENTTYPE 的数据属性：

$("#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();
}

现在我需要准备相同的功能，但过滤器“congress”也应该找到一个具有数据属性“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>

Answer 1

我建议 map、toggle 和一些：

 const doFilter = () => { const eventTypes = $("#event_filter:checkbox:checked").map(function() { return $(this).val(); }).get() $("#events li").each(function() { const events = $(this).data("eventtype").split(","); const found = eventTypes.length === 0 || events.some(event => eventTypes.includes(event)); $(this).toggle(found); }); }; $("#event_filter:checkbox").on("click",doFilter);

 <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>