Question

我想要WordPress分类的Ajax过滤器。我在此处显示的脚本的目标是选择下拉列表，但我想改用一些按钮。我的Java语言知识不是100％，所以我不知道如何更改某些内容以能够使用按钮而不是下拉菜单。你能帮我吗？

我试图将html代码更改为input：radio，然后将javascript更改为onclick，但这不起作用。过滤器不断显示所有内容。唯一可行的方法是使用下拉菜单。我使用的脚本位于 http://dominykasgel.com/ajax-posts-filter/

我使用的Javascript。

jQuery( ".js-category, .js-date" ).on( "change", function() {
        var category = $( '.js-category' ).val();
        var date = $( '.js-date' ).val()
        data = {
            'action': 'filterposts',
            'category': category,
            'date': date
        };
        $.ajax({
            url : ajaxurl,
            data : data,
            type : 'POST',
            beforeSend : function ( xhr ) {
                $('.filtered-posts').html( 'Laden...' );
                $('.js-category').attr( 'disabled', 'disabled' );
                $('.js-date').attr( 'disabled', 'disabled' );
            },
            success : function( data ) {
                if ( data ) {
                    $('.filtered-posts').html( data.projecten );

                    $('.js-category').removeAttr('disabled');
                    $('.js-date').removeAttr('disabled');
                } else {
                    $('.filtered-posts').html( 'Helaas, er zijn geen projecten gevonden.' );
                }
            }
        });
    });

我用于functions.php的php代码

 function ajax_filterposts_handler() {
      $category = esc_attr( $_POST['category'] );
      $date = esc_attr( $_POST['date'] );

      $args = array(
           'post_type' => 'projecten',
           'post_status' => 'publish',
           'posts_per_page' => -1,
           'orderby' => 'date',
           'order' => 'DESC'
      );

      if ( $category != 'all' )
           $args['cat'] = $category;

      if ( $date == 'new' ) {
           $args['order'] = 'DESC';
      } else {
           $args['order'] = 'ASC';
      }

      $posts = 'Helaas, er zijn geen projecten gevonden.';

      $the_query = new WP_Query( $args );

      if ( $the_query->have_posts() ) :
           ob_start();

           while ( $the_query->have_posts() ) : $the_query->the_post();
                get_template_part( 'includes/content-post' );
           endwhile;

           $posts = ob_get_clean();
      endif;

      $return = array(
      'projecten' => $posts
      );

      wp_send_json($return);
}
add_action( 'wp_ajax_filterposts', 'ajax_filterposts_handler' );
add_action( 'wp_ajax_nopriv_filterposts', 'ajax_filterposts_handler' );

archive.php文件中的代码：

<div class="filter-wrap">
    <div class="category">
        <!-- <div class="field-title">Category</div> -->
        <?php $get_categories = get_categories(array('hide_empty' => 0)); ?>
        <select class="js-category">
            <option value="all">alles</option>
            <?php
                if ( $get_categories ) :
                     foreach ( $get_categories as $cat ) :
            ?>
                     <option value="<?php echo $cat->term_id; ?>">
                         <?php echo $cat->name; ?>
                     </option>
                <?php endforeach;
                          endif;
                     ?>
        </select>
    </div>
</div>

<div class="filtered-posts">
<?php

if ( have_posts() ) :
    while ( have_posts() ) : the_post();
        get_template_part( 'includes/content-post' );
    endwhile;
endif;

?>
</div>

我的content-post.php代码：

<article id="post-id-<?php the_id(); ?>" <?php post_class('clearfiks archive-projecten'); ?>>
    <a href="<?php the_permalink() ?>"><h3><?php the_title(); ?></h3>
</article>

如何更改此javascript，使其确实针对此Ajax过滤器指定我的代码？

0 个答案: