[jQuery]地域別にコンテンツをカテゴリー分けするメニュー

2018.08.24

1ページに北海道から沖縄までの地域やショップ名などで、

クラス名「shopSelectBtn」を押したとき、該当する地域のコンテンツが表示される、メニューです。

   <ul class="shopSelectBtn">
        <li class="area_all"><a>全て表示</a></li>
        <li class="area_hokkaido"><a>北海道</a></li>
        <li class="area_tohoku"><a>東北</a></li>
        <li class="area_kanto"><a>関東</a></li>
        <li class="area_koshinetsu"><a>甲信越・北陸</a></li>
        <li class="area_tokai"><a>東海</a></li>
        <li class="area_kinki"><a>近畿</a></li>
        <li class="area_chugoku"><a>中国</a></li>
        <li class="area_shikoku"><a>四国</a></li>
        <li class="area_kyushu"><a>九州</a></li>
        <li class="area_okinawa"><a>沖縄</a></li>
</ul>
<ul class="shopSelectBtn">
        <li class="type_all"><a>全て表示</a></li>
        <li class="type_cafe"><a>ショップ名01</a></li>
        <li class="type_salon"><a>ショップ名02</a></li>
</ul>

<!--カテゴリごとに表示される内容-->
<ul class="category-list clear item-list">        
        <li>
　　　　　<div class="shopDetail">
　　　　　　<p class="area">北海道</p>
　　　　　　<p class="shopDetail_shopName">店舗名</p>
　　　　　　<p>住所4</p>
　　　　　</div>
        </li>
        <li>
　　　　　<div class="shopDetail">
　　　　　　<p class="area">東北</p>
　　　　　　<p class="shopDetail_shopName">店舗名</p>
　　　　　　<p>住所4</p>
　　　　　</div>
        </li>
    </ul>

</ul>

<li class="type_cafe"><a>ショップ名01</a></li>

<li class="type_salon"><a>ショップ名02</a></li>

</ul>

<li>

　　　　　</div>

</li>

<li>

　　　　　</div>

</li>

</ul>

<script>
$('.shopSelectBtn li').click(function(){
              var area = $(this).find('a').text();
                   $('.category-list li .area').each(function(){
                        var shop = $(this).text(); 
  
                          if(area == shop){
                              $(this).parents('li').show();
                        }else if(area == '全て表示'){                                         
                              $(this).parents('li').show();
                        }else{
                              $(this).parents('li').hide();
                       }     
               });
               if(area == '全て表示'){
　　　　　　　　　　 var all="";
                   $(this).parent().find('li').each(function(){
                       all = all + $(this).find('a').text();
                   });
                      console.log(all);
                        $('.category-list .area').each(function(){
                                 var shop_in = $(this).text();
                                 
                                 console.log(shop_in);
                               	 if (all.match(shop_in)) {
                                              $(this).parents('li').show();
	                          }else{
                                               $(this).parents('li').hide();
                                  }
                        });
               }
});
</script>

$('.shopSelectBtn li').click(function(){

var area = $(this).find('a').text();

$('.category-list li .area').each(function(){

var shop = $(this).text();

if(area == shop){

$(this).parents('li').show();

}else if(area == '全て表示'){

$(this).parents('li').show();

}else{

$(this).parents('li').hide();

}

});

if(area == '全て表示'){

　　　　　　　　　　 var all="";

$(this).parent().find('li').each(function(){

all = all + $(this).find('a').text();

});

console.log(all);

$('.category-list .area').each(function(){

var shop_in = $(this).text();

console.log(shop_in);

if (all.match(shop_in)) {

$(this).parents('li').show();

}else{

$(this).parents('li').hide();

}

});

}

});

</script>

<li class="area_hokkaido"><a>北海道</a></li>
と
<p class="area">北海道</p>

と

と上記のように北海道のボタンを押したときクラス「.area」の内容が北海道のカテゴリー一覧が表示されるようになります。

wpで会員制サイトをプラグインで作成

[jQuery]ロールオーバー

[jQuery]地域別にコンテンツをカテゴリー分けするメニュー

この記事を見た人は次の記事も見ています。

コメント

最近の投稿

アーカイブ

RELATED

WordPressのrssにアイキャッチ画像の情報を出力させる

.wrap()

メディアクエリ

便利なtag,cssジェネレーターまとめ【table box-shadow border-radius グラデーション】

Atomに入れて便利なプラグイン

WPプラグイン：WP-PageNavi