jQuery：如何从“全部显示”选项中隐藏类别？

时间：2014-07-23 14:37:26

标签： javascript jquery layout tumblr

我在博客网站Tumblr上使用了一个布局。我想删除＆＃34;童年影响＆＃34; “全部显示”功能中的类别。我只是设法将其从首页删除，但我希望童年影响只会在您点击其标签时显示。这是代码：     

<!-- 

CURRENTLY WATCHING #2
pistachi-o (nutty-themes @ tumblr)

Theme Documentation:
http://nutty-themes.tumblr.com/themedoc

Please Do Not:
http://nutty-themes.tumblr.com/terms

-->

<head>

<title>{Title}</title>
<link rel="shortcut icon" href="{Favicon}">
<link rel="altertnate" type="application/rss+xml" href="{RSS}">

<meta name="description" content="" />
<meta http-equiv="x-dns-prefetch-control" content="off"/>

<link href='http://fonts.googleapis.com/css?family=Roboto+Condensed:400,700,300' rel='stylesheet' type='text/css'>

<style type="text/css">

/* Reset ----------------------------- */

body,div,dl,dt,dd,ol,ul,li,pre,form,fieldset,input,textarea,p,th,td {margin:0;padding:0;}

/* Scrollbar ----------------------------- */

::-webkit-scrollbar {width: 6px;}
::-webkit-scrollbar-track {background: #FFF;}
::-webkit-scrollbar-thumb {background: #DDD;}

/* General ----------------------------- */

body {
background: #f3f3f3;
font-size: 10px;
color: #000000;
font-family: 'Roboto Condensed', Arial, sans-serif;
line-height: 100%; 
}

a:link, a:active, a:visited {
color: #130912;
text-decoration: none;
}

a:hover {
color: #f38335;
text-decoration: none;
}

b {
color: #f7941d;
text-decoration: none;
}

/* Isotope (DO NOT EDIT) ----------------------------- */

.isotope-item {
z-index: 2;
}

.isotope-hidden.isotope-item {
pointer-events: none;
z-index: 1;
}

.isotope,
.isotope .isotope-item {
-webkit-hiatus-duration: 0.8s;
-moz-hiatus-duration: 0.8s;
hiatus-duration: 0.8s;
}

.isotope {
-webkit-hiatus-property: height, width;
-moz-hiatus-property: height, width;
hiatus-property: height, width;
}

.isotope .isotope-item {
-webkit-hiatus-property: -webkit-transform, opacity;
-moz-hiatus-property: -moz-transform, opacity;
hiatus-property: transform, opacity;
}

/* Navigation ----------------------------- */

#shows {
position: relative; 
width: 100%; 
height: 10px; 
margin: 0px auto 10px; 
background: blue; 
padding: 15px 0px; 
background: #fafafa;
text-align: center; 
}

/* Contents ----------------------------- */

#container {
width: 840px;
position: relative; 
text-align: center; 
margin: 50px auto; 
}

#containers {
width: 840px;
position: relative; 
text-align: center; 
margin: 50px auto; 
}

#nextcontainer {
width: 840px;
position: relative; 
text-align: center; 
margin: 50px auto; 
}

#nextcontainers {
width: 840px;
position: relative; 
text-align: center; 
margin: 50px auto; 
}

.stylewrap {
background: #edd456;
width: 200px;
height: 165px;
margin: 5px;
text-align: center; 
text-transform: uppercase; 
}

.hiatus {
background: #a0c1ba;
}

.complete {
background: #45c0ab;
}

.childhood {
background: #e3e3e3;
}

.next {
background: #c6c6c6;
}

.stylewrap  img {
margin: 0;
width: 200px; 
border-bottom: 2px solid #F3F3F3; 
}

h2 {
margin: 10px 0px 3px; 
line-height: 100%; 
}

#filters {
text-transform: uppercase; 
}

#filters li {
display: inline; 
margin: 2px; 
padding: 2px 5px; 
}

#dash {
text-transform: uppercase; 
margin: 25px; 
}

#dash li {
display: inline; 
margin: 2px; 
padding: 2px 5px; 
}


.stylewrap:hover .grey {
filter: none;
-webkit-filter: grayscale(0%);  
}

</style>  
</head>

<body>

<div id="shows">
<ul id="filters" class="show-set clearfix" data-option-key="filter">
<li style="background: #f5f5f5;"><a href="#filter" data-option-value="*" class="selected">Show All</a></li>
<li style="background: #f5f5f5;"><a href="#filter" data-option-value=".current">Currently Watching</a></li>
<li style="background: #f5f5f5;"><a href="#filter" data-option-value=".hiatus">On Hiatus</a></li>
<li style="background: #f5f5f5;"><a href="#filter" data-option-value=".complete">Completed</a></li>
<li style="background: #f5f5f5;"><a href="#filter" data-option-value=".next">Next Up</a></li>
<li style="background: #f5f5f5;"><a href="#filter" data-option-value=".childhood">Childhood Influences</a></a></li>
</ul>
<ul id="dash">
<li><a href="/">Back Home</a></li>
<li><a href="http://tumblr.com/dashboard">Dashboard</a></li>
<li><a href="http://nutty-themes.tumblr.com/">Theme Credits</a></li>
</ul>
</div>


<div id="container">


<!-- To add completed show copy and paste the following -->
<div class="stylewrap next">
<img class="grey" src="http://imgur.com/Bktk9mC.jpg">
<h2 class="name"><a href="/tagged/">6teen</a></h2>
Up Next
</div>
<!-- End of Complete Show -->


<div class="stylewrap current">
<img class="grey" src="http://imgur.com/IO7NGnK.jpg" />
<h2 class="name"><a href="/tagged/18_to_life">18 to Life</a></h2>
Season 2 Episode 11
</div>


<div class="stylewrap childhood">
<img class="grey" src="http://imgur.com/NTMO0xq.jpg">
<h2 class="name"><a href="/tagged/">7th Heaven</a></h2>
(1996-2007)
</div>


<!-- To add completed show copy and paste the following -->
<div class="stylewrap complete">
<img class="grey" src="http://imgur.com/vPkxn7c.jpg">
<h2 class="name"><a href="/tagged/">About a Girl</a></h2>
(2007-2008)
</div>
<!-- End of Complete Show -->


<!-- To add hiatus show copy and paste the following -->
<div class="stylewrap hiatus">
<img class="grey" src="http://imgur.com/owiMXh5.jpg">
<h2 class="name"><a href="/tagged/">Awkward.</a></h2>
Returning September 23, 2014
</div>
<!-- End of Hiatus Show -->



<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="http://static.tumblr.com/whx9ghv/1eGm9d17y/isotope.js"></script>
<script type="text/javascript"> 
  $(function(){

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

    $container.isotope({
      itemSelector : '.stylewrap',
      filter: '.current, .hiatus, .next, .complete',

      getSortData : {
        name : function ( $elem ) {
          return $elem.find('.name').text();
        }
      }
    });


      var $optionSets = $('#shows .show-set'),
          $optionLinks = $optionSets.find('a');

      $optionLinks.click(function(){
        var $this = $(this);
        // don't proceed if already selected
        if ( $this.hasClass('selected') ) {
          return false;

        }
        var $optionSet = $this.parents('.show-set');
        $optionSet.find('.selected').removeClass('selected');
        $this.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 );
          filter: '.current, .hiatus, .next, .complete';
        }

        return false;
      });


  });
</script>





</body>
</html>

我认为问题出在jQuery中，但我无法弄明白。我已经花了两天时间，但我并不太高级，所以我一直在寻找能够得到答案的地方。

编辑：很抱歉不清楚。问题解决了！

2 个答案:

答案 0 :(得分：0)

您的问题不是很清楚，但我相信您已经在询问如何从无序列表中删除某个元素。

这一行：

<li style="background: #f5f5f5;"><a href="#filter" data-option-value=".childhood">Childhood Influences</a></a></li>

表示文本值为＆＃34;童年影响的列表元素＆＃34;。删除该行，此列表项将不再显示。

编辑：我误解了您的问题，给我一点时间，我会再次编辑此答案以正确解决您的整个问题

答案 1 :(得分：0)

嗯......不确定这是否是最佳方式，但您可以简单地更改“全部显示”选项的data-option-value属性，以便从选择器中省略childhood。您的HTML可能会变为：

<li style="background: #f5f5f5;"><a href="#filter" data-option-value="*:not(.childhood)" class="selected">Show All</a></li>

在这里JSFiddle向您展示代码的实际效果。现在点击＆＃34;显示全部＆＃34;不会透露标有childhood的项目。希望这可以帮助！如果您有任何问题，请告诉我。

相关问题
最新问题