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>