JQueryでページコンテンツをフィルタリングする

debugcn 投稿 Dev

マティー

ボタンの決定に基づいてページのコンテンツを変更する、これに触発されたWebページを構築しようとしています。以下に基本的なスクリプトがありますが、いくつかのヘルプ/ロジックが必要です。

フィルター部分をページのコンテンツに対して機能させるためのサポートが必要です。

ありがとうございました！

// 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>

CodePenで表示

シースルー

したがって、最初の部分では、次のようなものが必要だと思います。

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

そして2番目の部分は、最初に取得したコードよりもはるかに少ないコードです。フェードイン効果のある画像を追加しました。これがフィルタリング効果と呼ばれるものだったと思います。

 $('.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

});

コーデックス

実際、例として提供したページが初めてその効果を発揮したのは、画像が読み込まれたためだと思います。2回目、3回目などのクリックでは、単に表示されていました。

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]