categories - Category List and Automatic jQuery classes

admin管理员组

文章数量:1291455

Objective and layout:

1. I have two separate divs (this is in a Custom Page template). DIV1 has a listing subcategories of a specified parent category.
2. Clicking on any of the listed subcats brings up a list of posts in that category in DIV2. Just the titles with links to the posts.

It's working now, but it's half manual.

Code in 1st DIV:

<?php $products = get_categories('child_of=1143&hide_empty=1');
  foreach ( $products as $product ) {
  echo '<li><a href="#" class='. $product->cat_ID .'>'.$product->cat_name.'</a></li>';
  } ?>

Code in 2nd DIV:

<!-- post lists -->
<ul id="list1" style="display: none;">
<?php $my_query = new WP_Query('category_name=lightbulbs&showposts=25&post_type=product&orderby=title&order=asc');
while ($my_query->have_posts()) : $my_query->the_post();
$do_not_duplicate = $post->ID;?>
<li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
<?php endwhile; ?>
</ul>

<ul id="list2" style="display: none;">
<?php $my_query = new WP_Query('category_name=refrigerators&showposts=25&post_type=product&orderby=title&order=asc');
while ($my_query->have_posts()) : $my_query->the_post();
$do_not_duplicate = $post->ID;?>
<li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
</ul>
</div>
<!-- / post lists -->

Script that makes it all work:

• .js in the header

• Plus this:

                  <script>
                  $(document).ready(function() {
                      var h1 = $("#list1").height();
                      var h2 = $("#list2").height();
                      $("#list1,#list2").height(Math.max(h1, h2));
                      $("#list2").hide();
                  });
  
                  $("#link1").live('click', function() {
                      $("#list1").show();
                      $("#list2").hide();
                  });
  
                  $("#link2").live('click', function() {
                      $("#list2").show();
                      $("#list1").hide();
                  });
              </script>
  

I wanted to see if there's a way to automate the second part. When I add a new subcategory, it gets listed in DIV1 automatically, but to show the posts in that category in DIV2, I have to manually a) add the div with the new list, and b) classes to the script.

Objective and layout:

1. I have two separate divs (this is in a Custom Page template). DIV1 has a listing subcategories of a specified parent category.
2. Clicking on any of the listed subcats brings up a list of posts in that category in DIV2. Just the titles with links to the posts.

It's working now, but it's half manual.

Code in 1st DIV:

<?php $products = get_categories('child_of=1143&hide_empty=1');
  foreach ( $products as $product ) {
  echo '<li><a href="#" class='. $product->cat_ID .'>'.$product->cat_name.'</a></li>';
  } ?>

Code in 2nd DIV:

<!-- post lists -->
<ul id="list1" style="display: none;">
<?php $my_query = new WP_Query('category_name=lightbulbs&showposts=25&post_type=product&orderby=title&order=asc');
while ($my_query->have_posts()) : $my_query->the_post();
$do_not_duplicate = $post->ID;?>
<li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
<?php endwhile; ?>
</ul>

<ul id="list2" style="display: none;">
<?php $my_query = new WP_Query('category_name=refrigerators&showposts=25&post_type=product&orderby=title&order=asc');
while ($my_query->have_posts()) : $my_query->the_post();
$do_not_duplicate = $post->ID;?>
<li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
</ul>
</div>
<!-- / post lists -->

Script that makes it all work:

• http://code.jquery/jquery-latest.js in the header

• Plus this:

                  <script>
                  $(document).ready(function() {
                      var h1 = $("#list1").height();
                      var h2 = $("#list2").height();
                      $("#list1,#list2").height(Math.max(h1, h2));
                      $("#list2").hide();
                  });
  
                  $("#link1").live('click', function() {
                      $("#list1").show();
                      $("#list2").hide();
                  });
  
                  $("#link2").live('click', function() {
                      $("#list2").show();
                      $("#list1").hide();
                  });
              </script>
  

I wanted to see if there's a way to automate the second part. When I add a new subcategory, it gets listed in DIV1 automatically, but to show the posts in that category in DIV2, I have to manually a) add the div with the new list, and b) classes to the script.

• categories
• jquery

Share Improve this question asked Oct 14, 2012 at 20:06 PhantasmixPhantasmix 15011 silver badge1515 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

Same principle applies:

1. You are looping through all products to generate first div.
2. Now take same list of products and generate list of posts for it in second div.
3. Count how many products you have and generate that many classes in your JS code.

本文标签： categoriesCategory List and Automatic jQuery classes