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，您可以在选择器中使用data属性。然后，您可以应用具有所需样式的类。

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

为数据过滤属性添加唯一样式

1 个答案: