时间戳

首页 > 解决方案 > 使用 HTML5 数据属性而不是 CSS 类进行同位素过滤

jquery - 使用 HTML5 数据属性而不是 CSS 类进行同位素过滤

问题描述

需要一些关于使用 HTML 5 数据属性而不是 CSS 类来过滤同位素内容的帮助或指导。

我目前已经实现了一个完全工作的内容过滤器，它工作得很好，但我需要在要过滤的项目上使用自定义数据属性。

本质上，我对要过滤的项目的标记如下：

<div class="col-4"    
data-featured="no"
data-bedroom="3"
data-bathroom="2"
data-garages="0"
data-province="gauteng"
data-city="sandton"
data-suburb="morningside"
data-listing-type="rent"
data-property-type="apartment"
data-property-size="0"
data-land-size="0"
data-price="12000"
data-agents="310061">
<!-- Item content here -->
</div>

这样我就可以过滤掉 div，例如；是 3 间卧室的单位。为此使用 CSS 类我觉得会导致大量开销并且感觉很脏。有没有办法利用自定义数据属性来过滤值而不是 CSS 类？

我目前有以下 JS 代码来处理过滤，但需要对其进行调整以使用数据属性而不是 CSS 类，并且我无法在线或在 Isotope 文档中找到解决方案。我认为需要一个过滤器功能，但这就是我没有找到解决方案的地方。

// Isotope
var filters = {};    
    
var $grid = $('.isotope').isotope({
    itemSelector: '.isotope-item',
    layoutMode: 'fitRows',
});
    
$('.filters').on( 'change', function( event ) {
    var $select = $( event.target );
    var filterGroup = $select.attr('value-group');
    filters[ filterGroup ] = event.target.value;
    var filterValue = concatValues( filters );
    $grid.isotope({ filter: filterValue });
});

function concatValues( obj ) {
    var value = '';
    for ( var prop in obj ) {
        value += obj[ prop ];
    }
    return value;
}

标签： jqueryjquery-isotopecustom-data-attribute

解决方案

您可以使用 jquery 属性选择器：

$grid.isotope({ filter: '[data-price=80]'});

您可以找到有关jquery 选择器的更多信息。

推荐阅读