JQuery過濾一個網站onClick去除某些div或部分

Question

我有一個博客樣式的網站，我放置了一個下拉按鈕的頂部，用於過濾內容。每個博客文章都將位於章節標籤中。

當用戶點擊菜單項時，會觸發點擊事件。我試圖保存代碼似乎很好的href。

然後，我希望迭代每個標籤與「標籤」的類。 找到每一個它應該檢查文本並與下拉框中的值進行比較。如果它匹配保持內容。如果不分離它。我認爲detach是最好的方法，因爲我需要重新刷新和/或用戶單擊下拉列表中的另一個選擇。

這裏是我的嘗試：

<div class="container blog-content"> 
    <div class="dropdown"> 
    <button class="btn btn-default dropdown-toggle" type="button" id="sortMenu" data-toggle="dropdown">Sort By: 
    <span class="caret"></span> 
    </button> 
    <ul class="dropdown-menu" role="menu" aria-labelledby="sortMenu"> 
     <li role="presentation"><a role="sortmenuitem" id="Adventure">Adventure</a></li> 
     <li role="presentation"><a role="sortmenuitem" id="Food">Food</a></li> 
     <li role="presentation"><a role="sortmenuitem" id="Nature">Nature</a></li> 
     <li role="presentation"><a role="sortmenuitem" id="Sites">Sites</a></li> 
    </ul> 
    </div> 
    <div class="row"> 
    <div class="col-sm-12 blog-main"> 
     <div class="row"> 
     <div class="col-sm-6"> 
      <section class="blog-post"> 
      <div class="panel panel-default"> 
       <img src="myimage.jpg" class="img-responsive" /> 
       <div class="panel-body"> 
       <div class="blog-post-meta"> 
        <span class="label label-light label-danger">Adventure</span> 
        <p class="blog-post-date pull-right">January 1, 2016</p> 
       </div> 
       <div class="blog-post-content"> 
        <a href="post-image.html"> 
        <h2 class="blog-post-title">Blog Title 1</h2> 
        </a> 
        <p>Lorem ipsum blah blah blah</p> 
        <a class="btn btn-info" href="post-image.html">Read more</a> 
        <a class="blog-post-share pull-right" href="#"> 
        <i class="material-icons">&#xE80D;</i> 
        </a> 
       </div> 
      </div> 
      </div> 
      </section> 
     <!-- /.blog-post --> 
      <section class="blog-post"> 
      <div class="panel panel-default"> 
       <div class="panel-body"> 
       <div class="blog-post-meta"> 
        <span class="label label-light label-info">Food</span> 
        <p class="blog-post-date pull-right">January 1, 2016</p> 
       </div> 
       <div class="blog-post-content"> 
        <a href="post-image.html"> 
        <h2 class="blog-post-title">Blog Title 2</h2> 
        </a> 
        <p>Lorem ipsum blah blah blah</p> 
        <a class="btn btn-info" href="post-image.html">Read more</a> 
        <a class="blog-post-share pull-right" href="#"> 
        <i class="material-icons">&#xE80D;</i> 
        </a> 
       </div> 
       </div> 
      </div> 
      </section> 
    <!-- /.blog-post --> 

JQuery的：

 <script> 
     $("a[role='sortmenuitem']").bind("click", function() { 
      var value = $(this).attr('id'); 
      $("a.label").each(function() { 
       if (this.text('value')) { 
       this.replace(); 
       } 
       else { 
       this.detach(); 
       } 
      }); 
     }); 
    </script> 

如果有更好的方法都在一起，我所有的耳朵。 我想過爲每個博客部分提供一個與其類別匹配的類，然後使用CSS來隱藏該元素。如果我在正確的場地，請讓我知道。

此外，一旦我們隱藏了與選定的下拉菜單項不匹配的部分，如果選擇了另一個元素，我需要將其放回。

我是新的（顯然）JQuery。任何「愚蠢」的解釋將不勝感激！

Answer 1

我假設你想根據當前的下拉選項隱藏/顯示博客文章。

對於第一個，你需要改變這一行：因爲標籤關聯到下的博客，後段的跨度元素

$(".blog-post .label") 

：

$("a.label") 

來。

爲了測試針對你需要改變這一行文字的值：

this.text('value') 

有：

$(this).text() 

爲了隱藏/顯示你的每一個循環內的部分搜索最近的博客帖子父母部分。

我在點擊內添加了e.preventDefault（）以停止導航。

此外，報告中所評論（哈立德牛逼），而不是使用bind你必須使用on，因爲它的用法已過時。

所以片段是：

$("a[role='sortmenuitem']").on("click", function(e) { 
 
    e.preventDefault(); 
 
    var value = $(this).attr('href'); 
 
    $(".blog-post .label").each(function() { 
 
    $(this).closest('.blog-post').toggle($(this).text() == value); 
 
    }); 
 
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 

 
<div class="container blog-content"> 
 
    <div class="dropdown"> 
 
     <button class="btn btn-default dropdown-toggle" type="button" id="sortMenu" data-toggle="dropdown">Sort By: 
 
      <span class="caret"></span> 
 
     </button> 
 
     <ul class="dropdown-menu" role="menu" aria-labelledby="sortMenu"> 
 
      <li role="presentation"><a role="sortmenuitem" href="Adventure">Adventure</a></li> 
 
      <li role="presentation"><a role="sortmenuitem" href="Food">Food</a></li> 
 
      <li role="presentation"><a role="sortmenuitem" href="Nature">Nature</a></li> 
 
      <li role="presentation"><a role="sortmenuitem" href="Sites">Sites</a></li> 
 
     </ul> 
 
    </div> 
 
    <div class="row"> 
 
     <div class="col-sm-12 blog-main"> 
 
      <div class="row"> 
 
       <div class="col-sm-6"> 
 
        <section class="blog-post"> 
 
         <div class="panel panel-default"> 
 
          <img src="myimage.jpg" class="img-responsive"/> 
 

 
          <div class="panel-body"> 
 
           <div class="blog-post-meta"> 
 
            <span class="label label-light label-danger">Adventure</span> 
 

 
            <p class="blog-post-date pull-right">January 1, 2016</p> 
 
           </div> 
 
           <div class="blog-post-content"> 
 
            <a href="post-image.html"> 
 
             <h2 class="blog-post-title">Blog Title 1</h2> 
 
            </a> 
 

 
            <p>Lorem ipsum blah blah blah</p> 
 
            <a class="btn btn-info" href="post-image.html">Read more</a> 
 
            <a class="blog-post-share pull-right" href="#"> 
 
             <i class="material-icons">&#xE80D;</i> 
 
            </a> 
 
           </div> 
 
          </div> 
 
         </div> 
 
        </section> 
 
        <!-- /.blog-post --> 
 
        <section class="blog-post"> 
 
         <div class="panel panel-default"> 
 
          <div class="panel-body"> 
 
           <div class="blog-post-meta"> 
 
            <span class="label label-light label-info">Food</span> 
 

 
            <p class="blog-post-date pull-right">January 1, 2016</p> 
 
           </div> 
 
           <div class="blog-post-content"> 
 
            <a href="post-image.html"> 
 
             <h2 class="blog-post-title">Blog Title 2</h2> 
 
            </a> 
 

 
            <p>Lorem ipsum blah blah blah</p> 
 
            <a class="btn btn-info" href="post-image.html">Read more</a> 
 
            <a class="blog-post-share pull-right" href="#"> 
 
             <i class="material-icons">&#xE80D;</i> 
 
            </a> 
 
           </div> 
 
          </div> 
 
         </div> 
 
        </section> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>