javascript - 使用 JQuery 过滤页面内容

Question

我正在尝试构建一个网页 inspired by this根据按钮决定更改页面内容。我有下面的基本脚本，但它们需要一些帮助/逻辑。

我需要帮助让过滤器部分为页面内容工作。

谢谢!

// Change button state - WORKING
$('.category-button').click(function() {
  $('.category-button').removeClass('active')
  $(this).addClass("active")
});


// Filter - NOT WORKING
$('.page-content').hide().first().show() // first bubbles or whatever comes first
// Turn user's choice into a filter
$categoryButton.on('click', function(e) {

  var $category = $(this).data('target');
  $pageContent.hide().filter('.' + $category).show(); // hide all content and then show only filtered

});

body {
  background: #EDE8D1;
}

.hero {
  background: #40838F;
  color: white;
  padding: 50px;
}

.category-button {
  background: #0A1D29;
  padding: 50px;
  color: white;
  text-transform: uppercase;
  font-size: 16px;
}

.active {
  background: #40838F;
}

<!-- BOOTSRAP CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="hero container-fluid text-center">

  <h1>Hello, World!</h1>

</div>


<div class="container text-center">


  <div class="row">
    <h4>Choose a category:</h4>
  </div>
  <!-- end row -->


  <div class="row">

    <!-- Choose Bubbles: -->
    <div class="col-md-4 col-sm-4 col-xs-4">
      <h5 class="category-button" data-target="bubbles">Bubbles</h5>
    </div>
    <!-- end col-md-4 col-sm-4 col-xs-4 -->

    <!-- Choose Trees: -->
    <div class="col-md-4 col-sm-4 col-xs-4">
      <h5 class="category-button" data-target="trees">Trees</h5>
    </div>
    <!-- end col-md-4 col-sm-4 col-xs-4 -->

    <!-- Choose Ocean: -->
    <div class="col-md-4 col-sm-4 col-xs-4">
      <h5 class="category-button" data-target="ocean">Ocean</h5>
    </div>
    <!-- end col-md-4 col-sm-4 col-xs-4 -->


  </div>
  <!-- end row -->

  <div class="row">
    <h4>Your Choice:</h4>
  </div>
  <!-- end row -->


</div>
<!-- end container -->



<!-- BUBBLES PAGE CONTENT -->
<div class="container page-content bubbles">
  <img alt="Picture of bubbles." width="100%" src="https://image.shutterstock.com/z/stock-vector-bubbles-background-223473784.jpg" />
</div>
<!-- end container -->


<!-- TREES PAGE CONTENT -->
<div class="container page-content trees">
  <img alt="Picture of trees." width="100%" src="https://image.shutterstock.com/z/stock-photo-tree-550788622.jpg" />
</div>
<!-- end container -->


<!-- OCEAN PAGE CONTENT -->
<div class="container page-content ocean">
  <img alt="Picture of ocean." width="100%" src="https://image.shutterstock.com/z/stock-photo-dark-blue-ocean-surface-seen-from-underwater-abstract-waves-underwater-and-rays-of-sunlight-582300589.jpg" />
</div>
<!-- end container -->



<!-- JQUERY JS -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

View on CodePen

Answer 1

所以对于第一部分，我认为您需要这样的东西:

 $('.category-button').click(function(){
     $('.category-button').removeClass('active')
     $(this).addClass( "active" )
 });
 $(".category-button:eq(0)").addClass('active') // highlight the first button from the beginning

第二部分的代码比您最初获得的代码少得多。我添加了图像淡入淡出效果，我想这就是你所说的过滤效果。

 $('.page-content').hide().first().show() // first bubbles or whatever comes first
// Turn user's choice into a filter
 var $categoryButton = $('.category-button');
 var $pageContent = $('.page-content');
 $categoryButton.on('click', function(e){

  var $category = $(this).data('target');
  $pageContent
    .hide()
    .find('img').hide()
    .end() // get back to pagecontent from images
    .filter("." + $category)
    .show()
    .find('img').fadeIn(); // hide all content and then show only filtered

});

The codepen

实际上，您作为示例提供的页面只是第一次有这种效果，我认为那是因为加载了图像。在第二次、第三次等点击时，它们只是出现了。