变换 UL->li inot List selected for isotope filtering menu

Question

我的同位素过滤器菜单有问题。我想转换 selected 列表框中的简单链接，但我对 JS 有疑问，或者我真的不知道 Ul->Li 是否可行。

这是菜单select

jQuery(function ($) {
 
 var $container = $('#posts-list');
 $container.isotope({
  itemSelector : '.item', 
    layoutMode : 'masonry'
 });
 
 var $optionSets = $('#filters'),
 $optionLinks = $optionSets.find('a');
 
 $optionLinks.click(function(){
 var $this = $(this);
 if ( $this.hasClass('selected') ) {
   return false;
 }
 var $optionSet = $this.parents('#filters');
 $optionSets.find('.selected').removeClass('selected');
 $this.addClass('selected');
 
  var selector = $(this).attr('data-filter');
 $container.isotope({ filter: selector });
 
 return false;
 });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="filters">
    <li><a href="#" data-filter="*" id="all">Everything</a></li>
 <?php 
  $terms = get_terms("category");
  $count = count($terms);
  if ( $count > 0 ){
   foreach ( $terms as $term ) {
    echo "<li><a href='#' data-filter='.".$term->slug."'>" . $term->name . "</a></li>\n";
   }
  } 
 ?>
</ul>

///////////////////
DISPLAY ITEMS
///////////////////

<div id="posts-list">
    <?php while ( $the_query->have_posts() ) : $the_query->the_post(); 
   $termsArray = get_the_terms( $post->ID, "category" );
   $termsString = "";
   foreach ( $termsArray as $term ) {
    $termsString .= $term->slug.' ';
   } ?> 
   <div class="<?php echo $termsString; ?> item bit-3">
               // DISPLAY THE CONTENT
   </div>
    <?php endwhile;  ?>
   </div>

我尝试了 selected 菜单：

jQuery(function ($) {
 
 var $container = $('#posts-list');
 $container.isotope({
  itemSelector : '.item', 
    layoutMode : 'masonry'
 });
  
$("#filters").on("click", ".init", function() {
    $(this).closest("ul").children('li:not(.init)').toggle();
});

var allOptions = $("ul").children('li:not(.init)');
$("ul").on("click", "li:not(.init)", function() {
    allOptions.removeClass('selected');
    $(this).addClass('selected');
    $("ul").children('.init').html($(this).html());
    allOptions.toggle();
});

  });

<ul id="filters">
    <li class="init"><a href="#" data-filter="*" id="all">Everything</a></li>
 <?php 
  $terms = get_terms("category");
  $count = count($terms);
  if ( $count > 0 ){
   foreach ( $terms as $term ) {
    echo "<li><a href='#' data-filter='.".$term->slug."'>" . $term->name . "</a></li>\n";
   }
  } 
 ?>
</ul>

你能帮帮我吗？

Answer 1

下面的代码可以做到：

PHP :

<select id="filters">
     <option data-filter="*" id="all">Everything</option>
    <?php 
        $terms = get_terms("category");
        $count = count($terms);
        if ( $count > 0 ){
            foreach ( $terms as $term ) { 
                echo "<option data-filter='.".$term->slug."'>" . $term->name . "
                         </option>\n";
            }
        } 
    ?>
</select>

<?php $the_query = new WP_Query( 'posts_per_page=50' );
    if ( $the_query->have_posts() ) : ?>
    <div id="posts-list">
    <?php while ( $the_query->have_posts() ) : $the_query->the_post(); 
           $termsArray = get_the_terms( $post->ID, "category" ); ?> 
          <!-- Get the terms for this particular item -->
    <?php 
        $termsString = "";
        foreach ( $termsArray as $term ) {
            $termsString .= $term->slug.' ';
        } ?> 
    <div class="<?php echo $termsString; ?>item">
        <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
            <h1>
                <a href="<?php the_permalink() ?>">
                    <?php the_title(); ?>
                </a>
            </h1>
            <section class="post_content">
                <p><?php echo get_the_content(); ?></p>
            </section>
        </article>
    </div> <!-- end item -->
    <?php endwhile;  ?>
</div> <!-- end isotope-list -->
<?php endif; ?>

JS :

jQuery(function ($) {

    var $container = $('#posts-list'),
    filters = {};

    $container.isotope({
        itemSelector : '.item'
    });

    // filter buttons
    $('select').change(function(){
        var $this = $(this);

        var group = $this.attr('data-filter');

        filters[ group ] = $this.find(':selected').attr('data-filter');

        var isoFilters = [];
        for ( var prop in filters ) {
            isoFilters.push( filters[ prop ] )
        }

        var selector = isoFilters.join('');
        $container.isotope({ filter: selector });
        return false;
    });

});

注意： 已测试

变换 UL->li inot List selected for isotope filtering menu

Transform UL->li inot List selected for isotope filtering menu

javascript

jquery

html

wordpress

jquery-isotope