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

如果data-attribute与另一个容器中的element的id匹配，则过滤掉元素

1 个答案: