javascript - 转换 UL->li inot 为同位素过滤菜单选择列表

Question

我的同位素过滤器菜单有问题。 我想转换选定列表框中的简单链接，但我在 JS 方面遇到问题，或者我真的不知道是否可以使用 Ul->Li。

这是菜单选择

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>

我尝试了所选的菜单:

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;
    });

});

注意:已测试