Question

我尝试使用JQuery创建简单的可过滤组合但是我没有得到满意的结果。我认为通过创建真正的应用程序来学习最好的方法。

我的代码：

$(document).ready(function() {
  $('.filter-container .filter-button').click(function(e) {
    e.preventDefault();
    $(this).addClass('active').siblings().removeClass('active');
    $('.portfolio').find('.portfolio-nested[data-filter=' + $(this).data('filter') + ']').fadeIn();
  });
})

.portfolio {
  width: 100%;
  padding: 20px 0;
  background-color: #00f676;
  text-align: center;
  font-family: Raleway, Tahoma;
}

.portfolio ul,
.portfolio li {
  list-style: none;
  margin: 0;
  padding: 0;
}

.portfolio ul {
  margin-bottom: 20px;
}

.portfolio .filter-container li {
  display: inline-block;
  margin-right: 20px;
  padding-bottom: 10px;
  border-bottom: 2px solid transparent;
  -moz-transition: all .6s ease-in-out;
  -o-transition: all .6s ease-in-out;
  -webkit-transition: all .6s ease-in-out;
  transition: all .6s ease-in-out;
  cursor: pointer;
}

.portfolio .filter-container li:last-child {
  margin-right: 0;
}

.portfolio .filter-container li.active,
.portfolio .filter-container li:hover {
  border-bottom: 2px solid #ffffff;
}

.portfolio .portfolio-nested {
  width: 100%;
  height: 200px;
  margin: 0 0 20px;
  background-color: #e1e1e1;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<section class="portfolio">
  <div class="container">
    <ul class="filter-container">
      <li data-filter="all" class="filter-button active">All</li>
      <li data-filter="design" class="filter-button">Design</li>
      <li data-filter="graphic" class="filter-button">Grahpic</li>
      <li data-filter="programming" class="filter-button">Porgramming</li>
    </ul>
    <div class="row">
      <div class="col-lg-3">
        <div class="portfolio-nested" data-filter="design">
          Hello World
        </div>
      </div>
      <div class="col-lg-3">
        <div class="portfolio-nested" data-filter="graphic">
          Hello World
        </div>
      </div>
      <div class="col-lg-3">
        <div class="portfolio-nested" data-filter="programming">
          Hello World
        </div>
      </div>
      <div class="col-lg-3">
        <div class="portfolio-nested" data-filter="graphic">
          Hello World
        </div>
      </div>
      <div class="col-lg-3">
        <div class="portfolio-nested" data-filter="programming">
          Hello World
        </div>
      </div>
      <div class="col-lg-3">
        <div class="portfolio-nested" data-filter="design">
          Hello World
        </div>
      </div>
      <div class="col-lg-3">
        <div class="portfolio-nested" data-filter="design">
          Hello World
        </div>
      </div>
      <div class="col-lg-3">
        <div class="portfolio-nested" data-filter="graphic">
          Hello World
        </div>
      </div>
    </div>
  </div>
</section>

注意：请不要建议我使用我在这里学习的任何插件

Answer 1

您的代码工作正常，但您忘记隐藏额外元素。请尝试以下方法：

$(document).ready(function() {
  $('.filter-container .filter-button').click(function(e) {
    e.preventDefault();

    $(this).addClass('active').siblings().removeClass('active');
    $(".portfolio-nested").hide();
    $('.portfolio').find('.portfolio-nested[data-filter=' + $(this).data('filter') + ']').fadeIn();
  });
});

注意第$(".portfolio-nested").hide();行。这会首先隐藏所有元素，然后下一行仅显示与您的过滤器匹配的元素。

PS：您还需要处理过滤器类型全部。

Answer 2

所有过滤器都很简单。我实施了它给课程＆＃34;所有＆＃34;列出项目。然后我插入了一个if语句<a href="cgi-bin/open.pl" target="popup">open</a> <a href="cgi-bin/security.pl" target="popup">Security</a>来显示所有if ($(this).hasClass("all))个项目。

过滤组合JQuery

2 个答案: