質問&ご回答いただきありがとうございます。
私自身もどう質問していいものか考えがまとまっていなかったので、
実現したい内容をうまく伝えられず、お手数をおかけいたしました。
それでもご回答いただきとてもありがたいです!!
ご回答いただく前に自分でこのようなコードを書いてしまったので、行き違いになってしまいましたが、
とても参考になります!
ちなみにページ読み込み時にはすべて商品を表示させ、
タグのボタンをクリックすることで、タグに該当する商品に絞りこませる仕様です。
いちおうこれで動いたのですが、タグのボタンをクリックした後に
ボタンを選択されている状態にしたい(どのタグを選んで表示しているのか分かるように)
という要望が出てきて、現在はそれをどうやって実現するか悩んでいるところです…。
PHP
1<ul id="tag">
2 <li><a id="tag1">タグ1</a></li>
3 <li><a id="tag2">タグ2</a></li>
4 <li><a id="tag3">タグ3</a></li>
5</ul>
6
7<ul id="product_archive">
8
9<?php if (have_posts()): ?>
10<?php while (have_posts()) : the_post(); ?>
11
12<li class="<?php
13$posttags = get_the_tags();
14if ($posttags) {
15 foreach($posttags as $tag) {
16 echo $tag->slug . ' ';
17 }
18}
19?>">
20<a href="<?php the_permalink(); ?>"><?php echo get_the_post_thumbnail(); ?></a>
21<div class="name"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></div>
22<div class="price">¥ <?php echo get_post_meta($post->ID, 'Price', true); ?></div>
23</li>
24
25<?php endwhile; ?>
26<?php endif; ?>
HTML
1<ul id="tag">
2 <li><a id="tag1">タグ1</a></li>
3 <li><a id="tag2">タグ2</a></li>
4 <li><a id="tag3">タグ3</a></li>
5</ul>
6
7
8<ul id="product_archive">
9<li class="tag1 tag2">
10<a href="#"><img src="xxx1.jpg"></a>
11<div class="name"><a href="#">商品名1</a></div>
12<div class="price">¥ 100,000~</div>
13</li>
14
15<li class="tag2 tag3">
16<a href="#"><img src="xxx2.jpg"></a>
17<div class="name"><a href="#">商品名2</a></div>
18<div class="price">¥ 100,000~</div>
19</li>
20
21<li class="tag1">
22<a href="#"><img src="xxx3.jpg"></a>
23<div class="name"><a href="#">商品名3</a></div>
24<div class="price">¥ 100,000~</div>
25</li>
26</ul>
JavaScript
1$(function() {
2 $('#tag1').on("click", function() {
3 $('#product_archive').children().hide();
4 $('.tag1').fadeIn();
5 });
6 $('#tag2').on("click", function() {
7 $('#product_archive').children().hide();
8 $('.tag2').fadeIn();
9 });
10 $('#tag3').on("click", function() {
11 $('#product_archive').children().hide();
12 $('.tag3').fadeIn();
13 });
14});