如何激活JS数据过滤器页面加载时？ [英] How to activate JS data-filter when page loads?

问题描述

我正在这个网站上工作 http://fireworkslove.com

我使用不同类别的导航（推荐，新闻等）我想在页面打开时显示推荐类别（ data-filter =。recommended）。现在推荐是可视的选择，但过滤器显示显示所有类别（数据过滤器=。推荐）。

这是nav的代码：

 < li>< a href =＃data-filter =。recommendedclass =selected >推荐< / A>< /锂> 
< li>< a href =＃data-filter =。news>新闻< / a>< / li> 
< li>< a href =＃data-filter =。community>社区< / a>< / li> 
< li>< a href =＃data-filter =。resources>资源< / a>< / li> 
< li>< a href =＃data-filter =。extensions> Extensions< / a>< / li> 
< li>< a href =＃data-filter =。tutorials>教程< / a>< / li> 
< li>< a href =＃data-filter =。articles>文章< / a>< / li> 
< li>< a href =＃data-filter =。influencers>影响因子< / a>< / li> 
< li>< a href =＃data-filter =*>全部显示< / a>< / li> 
  

我想我必须更改fireworkslove.com/js/custom.js上的代码过滤器 - 同位素（第78行）

这里是代码

  // ########################################## 
 // Filter  - 同位素
 // ####################################### ### 
 
 
 var $ container = $（'＃filter-container'）; 
 
 $ container.imagesLoaded（function（）{
 $ container.isotope（{
 itemSelector：'figure'，
 filter：'*'，
 resizable：false，
 animationEngine：'jquery'
}）; 
}）; 
 $ b //过滤按钮
 
 $（'＃filter-buttons a'）。click（function（）{
 
 // select current 
 var $ optionSet = $（this）.parents（'＃filter-buttons'）; 
 $ optionSet.find（'。selected'）。removeClass（'selected'）; 
 $（这个）.addClass（'selected'）; 
 
 var selector = $（this）.attr（'data-filter'）; 
 $ container.isotope（{filter：selector}） ; 
返回false; 
}）; 
  

我想激活 data-filter =。recommended code>当页面加载。



希望有人能帮助我，谢谢。


解决方案

完成！我必须改变;



过滤器：'*'

到

filter：'.recommended'

谢谢大家！

I'm working on this site http://fireworkslove.com

I make a nav with different categories (Recommended, News, etc) I want to show "Recommended" category when the page opens (data-filter=".recommended"). Right now "Recommended" is visually selected but the filter shows "Show all" category (data-filter=".recommended").

Here is the code of the nav:

<li><a href="#" data-filter=".recommended" class="selected">Recommended</a></li>
<li><a href="#" data-filter=".news">News</a></li>
<li><a href="#" data-filter=".community">Community</a></li>
<li><a href="#" data-filter=".resources">Resources</a></li>
<li><a href="#" data-filter=".extensions">Extensions</a></li>
<li><a href="#" data-filter=".tutorials">Tutorials</a></li>
<li><a href="#" data-filter=".articles">Articles</a></li>
<li><a href="#" data-filter=".influencers">Influencers</a></li>
<li><a href="#" data-filter="*">Show all</a></li>

I think that I must change the code on fireworkslove.com/js/custom.js on the section "Filter - Isotope" (line 78)

Here is the code

//##########################################
// Filter - Isotope 
//##########################################


var $container = $('#filter-container');

$container.imagesLoaded( function(){
    $container.isotope({
        itemSelector : 'figure',
        filter: '*',
        resizable: false,
        animationEngine: 'jquery'
    });
});

// filter buttons

$('#filter-buttons a').click(function(){

    // select current
    var $optionSet = $(this).parents('#filter-buttons');
    $optionSet.find('.selected').removeClass('selected');
    $(this).addClass('selected');

    var selector = $(this).attr('data-filter');
    $container.isotope({ filter: selector });
    return false;
});

I want to activate the data-filter=".recommended" when the page loads.

Hope someone can help me, thanks.

解决方案

Done! I must change;

filter: '*'

to

filter: '.recommended'

Thanks everybody!

这篇关于如何激活JS数据过滤器页面加载时？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！