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

Question

I am using a layout on the blog website Tumblr. 我正在博客网站Tumblr上使用布局。 I'd like to remove the "Childhood Influences" category from the Show All feature. 我想从“显示全部”功能中删除“儿童时期的影响”类别。 I've only managed to remove it from the front page, but I would like the Childhood Influences to only show up when you click on its tab. 我只是设法从首页上将其删除，但是我希望仅当您单击其选项卡时才会显示“童年的影响”。 Here's the code: 这是代码：

<!-- 

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>

I believe the problem is in the jQuery, but I just can't figure it out. 我相信问题出在jQuery，但我无法弄清楚。 I've spent 2 days on this, but I'm not too advanced so I've just been searching everywhere I can for an answer. 我已经花了两天的时间，但是我还不太先进，所以我一直在寻找可以找到答案的地方。

edit: Sorry for being unclear. 编辑：很抱歉不清楚。 The problem is solved! 问题已经解决了！

Answer 1

Your question isn't very clear but I believe you're asking how to remove a certain element from your unordered list. 您的问题不是很清楚，但我相信您是在问如何从无序列表中删除某个元素。

This line: 这行：

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

represents a list element with a text value of "Childhood Influences". 表示一个列表元素，其文本值为“童年的影响”。 Remove the line, and this list item will no longer show up. 删除该行，该列表项将不再显示。

Edit: I misread your question, give me a second and I will edit this answer again to address your entire question correctly 编辑：我误解了您的问题，请稍等，我将再次编辑此答案以正确解决您的整个问题

Answer 2

Well...not sure if this is the best way, but you could simply alter the data-option-value attribute for the Show All option to omit childhood from the selector. 好吧...不确定这是否是最好的方法，但是您可以简单地更改Show All选项的data-option-value属性，以从选择器中省略childhood 。 You HTML might then become: 您的HTML可能会变成：

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

Here's a JSFiddle to show you the code in action. 这是一个JSFiddle ，向您展示实际的代码。 Now clicking "Show All" will not reveal the item tagged with childhood . 现在，单击“显示全部”将不会显示标记有childhood的项目。 Hope this helps! 希望这可以帮助！ Let me know if you have any questions. 如果您有任何疑问，请告诉我。

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

问题描述

2 个解决方案

解决方案1
0 2014-07-23 14:47:53

解决方案2
0 已采纳 2014-07-23 14:55:20

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

问题描述

2 个解决方案

解决方案1 0 2014-07-23 14:47:53

解决方案2 0 已采纳 2014-07-23 14:55:20

解决方案1
0 2014-07-23 14:47:53

解决方案2
0 已采纳 2014-07-23 14:55:20