jquery - 为数据过滤属性添加独特的样式

Question

我正在使用 HTML5 数据属性进行一些 img 过滤(例如:)我想知道如果说 data-rel="anim"应用自定义样式的最佳方法 被选中？定位 'data-filter='anim' 和 data-rel="anim" 的最佳方式是什么，以便在通过选择按钮填充这些缩略图时，它们与其他默认拇指样式相比，尺寸更大，位置略有不同。

  <a data-rel="all" href="javascript:;" class="filter active">View all</a>
  <a data-rel="anim" href="javascript:;" class="filter three">3 Columns</a>
  <a data-rel="land" href="javascript:;" class="filter four">4 Columns</a>

<div class="galleryWrap cf">
<a class='fancybox imgContainer' href='./gallery/dress.jpg' data-fancybox-group='gallery' data-filter='arch'><img src='./gallery/dress.jpg' alt='image ./gallery/dress.jpg' /></a>
<a class='fancybox imgContainer' href='./gallery/dress.jpg' data-fancybox-group='gallery' data-filter='land'><img src='./gallery/dress.jpg' alt='image ./gallery/dress.jpg' /></a>
<a class='fancybox imgContainer' href='./gallery/dress.jpg' data-fancybox-group='gallery' data-filter='anim'><img src='./gallery/dress.jpg' alt='image ./gallery/dress.jpg' /></a>
</div> 

Answer 1

使用 jquery，您可以在选择器中使用数据属性。然后，您可以应用具有所需样式的类。

$("a[data-rel='anim']").on('click', function() {
  $("a[data-filter='anim']").addClass('selectedStyles');
});