部分匹配數據屬性

Question

我正在使用與items和selectors數據屬性product-collection__category完全匹配的類別過濾 selectors 。 但是我只希望它是部分匹配或惰性匹配。 例如，如果selector包含“貓”，它仍然會包含items有“貓”，“類別”等我都試過if (categories[i] *= cat)但它是錯誤的。

小提琴

HTML

<div class="product-collection">
    <ul>
        <li class="product-collection__selector
                   product-collection__selector--active"
            data-product-collection__category="">All</li>
        <li class="product-collection__selector"
            data-product-collection__category="cat1">Category 1</li>
        <li class="product-collection__selector"
            data-product-collection__category="cat2">Category 2</li>
    </ul>
    <ul>
        <li class="product-collection__item"
        data-product-collection__category="cat1">Item 1 [cat 1]</li>
        <li class="product-collection__item"
        data-product-collection__category="cat2">Item 2 [cat 2]</li>
        <li class="product-collection__item"
        data-product-collection__category="cat1 cat2">Item 3 [cat 1, cat 2]</li>
    </ul>

</div>

碼

$(function() {
$('.product-collection').each(function() {
        var $collection = $(this);
        var $selectors = $collection.find('.product-collection__selector,.filterselect__selector');
        var $items     = $collection.find('.product-collection__item');

        $selectors.click(function() {
            var $selector = $(this);
            var cat = $selector.data('product-collection__category');


        $selectors.change(function() {
         var $selector = $(this);
         var cat = $selector.find('option:selected').data('product-collection__category');

        $selectors.removeClass('filterselect__selector--active');
        $selector.addClass('filterselect__selector--active'); });                

            if (cat) {
                var containsCategory = function(data) {
                    var categories = data.split(/\s+/);
                    for (var i = 0; i < categories.length; i++)
                        if (categories[i] == cat)
                            return true;
                    return false;
                };
            }
            else {
                $items.fadeIn();
            }
        });
    });
});

Answer 1

我簡化了小提琴，以便您可以看到選擇器並進行測試-http://jsfiddle.net/cYFLe/64/

$('li').each(function() {
    // test the data attribute for partial
    if( $(this).is('[data-product-collection__category*="cat"]') ) {
        console.log( $(this).text() );
    }
});

http://api.jquery.com/is/是這里的區別，它允許測試類別的真實性。