Question

我想创建一个dynamic navigation bar（使用两个div类过滤器：status private / public / etc ..以及数据音频/视频/等类型......）。目前，菜单不会根据活动过滤器项进行更新。我只需要一个JS脚本，在其中一个过滤器中选择div类＆＃34; active＆＃34;并在另一个过滤器中显示id。对于我下面的例子，我想要前缀＆＃34; audio＆＃34;添加到数据过滤器值而不是＆＃34; all＆＃34;和前缀＆＃34; private＆＃34;添加到数据过滤器值而不是＆＃34; all＆＃34;。

因此，根据div class＆＃34; active＆＃34;，第一个过滤器中的值应为：

data-filter=".audioall" 
data-filter=".audioprivate" 
data-filter=".audiopublic" 
data-filter=".audiodeleted"

并且，在第二个过滤器中，应该是：

data-filter=".allprivate" 
data-filter=".audioprivate" 
data-filter=".videoprivate" 
data-filter=".photoprivate" 
data-filter=".newsprivate" 
data-filter=".blogprivate" 
data-filter=".mailprivate" 
data-filter=".socialprivate"

我目前的代码：

<span class="folder-cat-items">
<div id="all" class="folder-cat-label" data-filter=".allall">all</div> /        
<div id="private" class="folder-cat-label active" data-filter=".allprivate">private</div> / 
<div id="public" class="folder-cat-label" data-filter=".allpublic">public</div> / 
<div id="deleted" class="folder-cat-label" data-filter=".alldeleted">deleted</div>
</span> 

<span class="filter-items">
<div id="all" class="filter-label" data-filter=".allall">all</div> /        
<div id="audio" class="filter-label active" data-filter=".audioall">audio</div> / 
<div id="video" class="filter-label" data-filter=".videoall">video</div> / 
<div id="photo" class="filter-label" data-filter=".photoall">photo</div> / 
<div id="news" class="filter-label" data-filter=".newsall">news</div> / 
<div id="blog" class="filter-label" data-filter=".blogall">blog</div> / 
<div id="mail" class="filter-label" data-filter=".mailall">mail</div> / 
<div id="social" class="filter-label" data-filter=".socialall">social</div>
</span>

这里我的JS涉及砖墙和过滤器，但它并不涉及动态数据过滤器标签..

<script type="text/javascript">
        $(function() {
            var wall = new freewall("#freewall");
            wall.reset({
                selector: '.brick',
                animate: true,
                draggable: true,
                cellW: 160,
                cellH: 160,
                onResize: function() {
                    wall.fitWidth();
                }
            });
            wall.addCustomEvent('onBlockLoad', function(setting){
                console.log(setting);
            });
            wall.filter("");
$(".filter-label").click(function() {
                $(".filter-label").removeClass("active");
                var filter = $(this).addClass('active').data('filter');
                if (filter) {
                    wall.filter(filter);
                } else {
                    wall.unFilter();
                }
$(window).one("scroll",function() { document.body.scrollTop = document.documentElement.scrollTop     = 0; });
            });
wall.filter("");
$(".folder-cat-label").click(function() {
                $(".folder-cat-label").removeClass("active");
                var filter = $(this).addClass('active').data('filter');
                if (filter) {
                    wall.filter(filter);
                } else {
                    wall.unFilter();
                }
$(window).one("scroll",function() { document.body.scrollTop = document.documentElement.scrollTop = 0; });
            });
wall.filter("");
            $(".post-filter-label").click(function() {
                $(".post-filter-label").removeClass("active");
                var filter = $(this).addClass('active').data('filter');
                if (filter) {
                    wall.filter(filter);
                } else {
                    wall.unFilter();
                }
$(window).one("scroll",function() { document.body.scrollTop = document.documentElement.scrollTop = 0; });
            });
            wall.fitWidth();
        });
    </script>

我希望自己足够清楚。如果需要，我可以指定我的问题。

使用div class＆＃34; active＆＃34;制作动态导航菜单和Javascript

0 个答案: