javascript - JQuery 过滤网站 onClick 以删除某些 div 或部分

Question

我有一个博客风格的网站，为了过滤内容，我在顶部放置了一个下拉按钮。每篇博文都将位于版 block 标签中。

当用户点击菜单项时会触发点击事件。我正在尝试保存代码似乎可以正常工作的 href。

然后我希望用“标签”类迭代每个标签。 对于找到的每一个，它应该检查文本并与下拉框中的值进行比较。如果匹配保留内容。如果不拆开它。我认为分离是最好的方法，因为我需要将其重新刷新和/或如果用户单击下拉列表中的另一个选择。

这是我尝试过的:

<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

我假设您想根据当前的下拉选择隐藏/显示博文。

首先，您需要更改这一行:

$("a.label")

到:

$(".blog-post .label")

因为标签与博客文章部分下的 span 元素相关联。

为了根据文本测试值，您需要更改此行:

this.text('value')

与:

$(this).text()

为了隐藏/显示每个循环中的部分，您必须搜索最近的博客文章父部分。

我在点击中添加了 e.preventDefault() 以停止导航。

此外，如评论中所述(Khalid T)，改为使用 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>