jQuery：如何從“全部顯示”選項中隱藏類別？

Question

我正在博客網站Tumblr上使用布局。 我想從“顯示全部”功能中刪除“兒童時期的影響”類別。 我只是設法從首頁上將其刪除，但是我希望僅當您單擊其選項卡時才會顯示“童年的影響”。 這是代碼：

<!-- 

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，但我無法弄清楚。 我已經花了兩天的時間，但是我還不太先進，所以我一直在尋找可以找到答案的地方。

編輯：很抱歉不清楚。 問題已經解決了！

Answer 1

您的問題不是很清楚，但我相信您是在問如何從無序列表中刪除某個元素。

這行：

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

表示一個列表元素，其文本值為“童年的影響”。 刪除該行，該列表項將不再顯示。

編輯：我誤解了您的問題，請稍等，我將再次編輯此答案以正確解決您的整個問題

Answer 2

好吧...不確定這是否是最好的方法，但是您可以簡單地更改Show All選項的data-option-value屬性，以從選擇器中省略childhood 。 您的HTML可能會變成：

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

這是一個JSFiddle ，向您展示實際的代碼。 現在，單擊“顯示全部”將不會顯示標記有childhood的項目。 希望這可以幫助！ 如果您有任何疑問，請告訴我。

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