jqueryでフィルタリング

下記参考サイトを参考にjqueryでフィルタリングを設置しました。
https://www.webprofessional.jp/building-a-filtering-component-with-css-animations-jquery/

フィルタリング自体は正常に動作し、さらにアンカーリンクでフィルタリングの初期表示を指定したいとのことだったので、下記の通りコードを組んでみました。

html
1<div class="cta filter">
2  <a class="all active" data-filter="all" href="#" role="button">全て見る</a>
3  <a class="green" data-filter="#tab1" href="#" role="button">分類Ａ</a>
4  <a class="blue" data-filter="#tab2" href="#" role="button">分類Ｂ</a>
5</div>
6
7<div class="boxes">
8  <div class="box-elm tab1" data-category="#tab1">
9     分類Ａ
10　</div>
11  <div class="box-elm tab2" data-category="#tab2">
12    分類B
13  </div>
14  <div class="box-elm tab1" data-category="#tab1">
15     分類Ａ
16　</div>
17</div>

jQuery
1$(document).ready(function(){
2		
3  var $filters = $('.filter [data-filter]'),
4      $boxes = $('.boxes [data-category]');
5		
6  var $urlHash = location.hash;
7 　　　　
8  // URLにアンカーが存在する場合
9  if($urlHash){
10     //アンカーがtab1だったら
11     if ($urlHash == '#tab1') {
12        $filters.removeClass('active');
13        $('#tab1').addClass('active');
14        $boxes.removeClass('is-animated')
15        .fadeOut().promise().done(function() {
16        $boxes.filter('[data-category = "' + $urlHash + '"]')
17        .addClass('is-animated').fadeIn();
18	});
19     }
20　　　//アンカーがtab2だったら
21     if ($urlHash == '#tab2') {
22         $filters.removeClass('active');
23　　　　　$('#tab2').addClass('active');
24　　　　　$boxes.removeClass('is-animated')
25　　　　　.fadeOut().promise().done(function() {
26　　　　　$boxes.filter('[data-category = "' + $urlHash + '"]')
27　　　　　.addClass('is-animated').fadeIn();
28　　　　　});
29      }		
30   }
31　　
32　　//通常のフィルタリングの処理
33　　$filters.on('click', function(e) {
34　　　　e.preventDefault();
35　　　　var $this = $(this);
36　　　　$filters.removeClass('active');
37　　　　$this.addClass('active');
38
39　　　　var $filterColor = $this.attr('data-filter');
40
41		  if ($filterColor == 'all') {
42			$boxes.removeClass('is-animated')
43			  .fadeOut().promise().done(function() {
44				$boxes.addClass('is-animated').fadeIn();
45			  });
46		  } else {
47			$boxes.removeClass('is-animated')
48			  .fadeOut().promise().done(function() {
49				$boxes.filter('[data-category = "' + $filterColor + '"]')
50				  .addClass('is-animated').fadeIn();
51			  });
52		  }
53		});
54
55	});
56});

アンカーリンクの処理について、今後フィルタリングがtab3、tab4と増えていった際にそれぞれのif分を書くのではなく、アンカーリンクの末尾の数字で判断して処理したい場合、どのように記述すれば良いのでしょうか？

行動規範の内容に同意します

回答2件

ベストアンサー

jQuery
1
2  if($urlHash){
3     for(i=1;i<=4;i++){
4        if ($urlHash == '#tab'+i) {
5           $filters.removeClass('active');
6           $('#tab'+i).addClass('active');
7           $boxes.removeClass('is-animated')
8           .fadeOut().promise().done(function() {
9           $boxes.filter('[data-category = "' + $urlHash + '"]')
10           .addClass('is-animated').fadeIn();
11        });
12     }   
13   }
14

動くかどうかは知りません。

投稿2019/11/14 02:48

kyoya0819

総合スコア10429

ysfree14

2019/11/14 03:56

動作しました、ありがとうございます。

行動規範の内容に同意します

javascript
1<style>
2.active{color:red}
3</style>
4<script>
5$(function(){
6  $('[data-filter]').on('click',function(e){
7    e.preventDefault();
8    $('[data-filter]').removeClass('active');
9    $(this).addClass('active');
10    var filter=$(this).data('filter');
11    $('[data-category]').hide().filter(function(){
12      return [$(this).data('category'),"all"].indexOf(filter)>-1;
13    }).show()
14  }).eq(0).trigger('click');
15});
16</script>
17<div class="cta filter">
18  <a data-filter="all"  href="#">全て見る</a>
19  <a data-filter="tab1" href="#">分類Ａ</a>
20  <a data-filter="tab2" href="#">分類Ｂ</a>
21  <a data-filter="tab3" href="#">分類Ｃ</a>
22  <a data-filter="tab4" href="#">分類Ｄ</a>
23</div>
24
25<div class="boxes">
26  <div data-category="tab1">分類Ａ</div>
27  <div data-category="tab1">分類Ａ</div>
28  <div data-category="tab2">分類Ｂ</div>
29  <div data-category="tab1">分類Ａ</div>
30  <div data-category="tab3">分類Ｃ</div>
31  <div data-category="tab2">分類Ｂ</div>
32  <div data-category="tab4">分類Ｄ</div>
33</div>