如果数据属性与另一个容器中元素的 id 匹配，则过滤掉元素

Question

li 项目是具有数据过滤器属性的可点击 div。单击时，我需要 jQuery 来确定是否有任何 li 项数据过滤器属性与“filteringResults”容器中的任何 div 匹配。然后将继续到“filteringResults”容器，仅显示与任何选定的 li 项目数据过滤器属性匹配的 div。

<li data-filter='clm, ebusiness, seo'>
  <div class="itemcontainer">
    <img src="site-resources/images/chat-32W.png" alt="">
    <div class="tick"></div>
  </div>
  <p>Engage</p>
</li>
<li data-filter='clm, facebookads, website'>
  <div class="itemcontainer">   
    <img src="site-resources/images/engineering-32W.png" alt="">
    <div class="tick"></div>
  </div>
  <p>Manage</p>
</li>

<ul id="filteringResults">
  <li id="clm">CLM</li>
  <li id="ebusiness">EBusiness</li>
  <li id="seo">SEO</li>
  <li id="website">Webite</li>
  <li id="facebookads">Facebook Ads</li>
</ul>

任何帮助将不胜感激。

谢谢

Answer 1

你可以像这样使用attribute contains选择器

$("li").click(function () {
    alert($("[data-filter*=" + this.id + "]").data("filter"));
});

Fiddle