如何在点击时同时过滤和处理项目

Posted 2023-05-09

【中文标题】如何在点击时同时过滤和处理项目

【英文标题】：How to filter and resort items simultaneously onclick

【发布时间】：2013-01-17 20:08:32

【问题描述】：

我正在使用 jQuery isotope 插件根据其类别过滤一组结果。我正在尝试更进一步，同时对过滤后的结果进行重新排序（对于每个类别，项目将具有不同的排序顺序）。

当一个类别被点击时，项目将被过滤为那些与类别匹配的项目作为一个类。在下面的示例中，有两个项目：两者都被归类为“类别演讲者”和“类别支持者”，因此当我在过滤器导航中单击其中任何一个类别时，都会出现这两个项目。我现在想做的是根据视图中的类别对这些项目进行不同的排序。

When "Speakers" is selected, "post-1" would show first.选择“支持者”时，将首先显示“post-2”。排序将基于项目中的附加类（sort-speakers-1、sort-speakers-2、sort-supporters-1、sort-supporters-2 等）。

我希望这是有道理的！我尝试使用 getSortData 选项，但我做错了。同位素文档很有意义，我能够单独过滤和排序。但同时运气不好。

下面的简化过滤器代码

html：

<!-- Grid of filterable/sortable items -->
<div id="Grid">

    <div id="post-1" class="category-supporters category-speakers item sort-speakers-1 sort-supporters-2" data-slug="lorem-ipsum-dolor">
        <div class="itemButton format-standard"></div>
        <div class="small-info" data-permalink="http://external-link.com" data-title="Lorem Ipsum">
            <div class="entry-image clearfix">
                <div class="hover-content zoom">
                    <a title="Lorem Ipsum" href="http://external-link.com" class="preload imgSmall item-preview iconPost" rel="">
                        <img src="logo.jpg"  />
                    </a>
                </div>
            </div>
        </div>
    </div>

    <div id="post-2" class="category-speakers category-supporters item sort-speakers-2 sort-supporters-1" data-slug="lorem-ipsum-dolor">
        <div class="itemButton format-standard"></div>
        <div class="small-info" data-permalink="http://external-link.com" data-title="Lorem Ipsum">
            <div class="entry-image clearfix">
                <div class="hover-content zoom">
                    <a title="Lorem Ipsum" href="http://external-link.com" class="preload imgSmall item-preview iconPost" rel="">
                        <img src="logo2.jpg"  />
                    </a>
                </div>
            </div>
        </div>
    </div>        

</div>

javascript：

jQuery(document).ready(function()

    $container = jQuery('#Grid');

    $container.isotope(
        itemSelector : '.item',
        transformsEnabled: false,
        masonry: 
            columnWidth: 160
        
    );

   $optionLinks.click(function()
        var $this = jQuery(this);

        var $optionSet = $this.parents('.option-set');
        $optionSet.find('.selected').removeClass('selected');
        $this.addClass('selected');        
        $this.parent().parent().prev('a').addClass('selected');

        // make option object dynamically, i.e.  filter: '.my-filter-class' 
        var options = ,
        key = $optionSet.attr('data-option-key'),
        value = $this.attr('data-option-value');

        // parse 'false' as false boolean
        value = value === 'false' ? false : value;
        options[ key ] = value;
        if ( key === 'layoutMode' && typeof changeLayoutMode === 'function' ) 
            // changes in layout modes need extra logic
            changeLayoutMode( $this, options )
         else 
            // otherwise, apply new options
            $container.isotope( options );
        
        return false;
    );    

);

关于如何修改 JavaScript 以使其每次都使用的任何建议？

【参考方案1】：

同位素文档是有意义的，我可以单独过滤和排序。但同时运气不好。

我目前也在从事一个同位素项目。我发现一次排序和过滤没有问题。

我建议将您的排序值放在数据属性中：

<div data-sort-speaker="1"> 

这使得检索值变得更容易（但这只是我）。那么：

$.container.isotope( 
    // all your other initialization options here.
    getSortData:  
        speakers: function ($elem) 
            return $elem.data('sort-speaker'); // will return 1 in this example.
         
     
);

// On button click:
$.container.isotope(filter: '.category-speakers', sortBy: 'speakers');

关于如何修改 JS 每次都使用的任何建议？

你可以试试打电话

 $.container.isotope('reLayout');

每次。但如果您每次都修改过滤器或排序选项，则不需要这样做。

【讨论】：

迈克尔，谢谢您的解释。我想太多需要发生的事情，但我现在可以正常工作（几乎完全按照您的建议）。