javascript - 过滤投资组合 JQuery

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:您还需要处理过滤器类型All。