wordpress 中带有 ajax 的 slick-slider 过滤器幻灯片

Question

我使用光滑的滑块将图像数量显示为帖子类型，在 wp 中分类。

我使用 wp 函数 wp_dropdown_categories() 显示类别下拉列表以过滤图像。

我在更改输入值时更新了幻灯片，但是有一个错误， 它没有更新滑块。

相反，它添加了幻灯片，结果是重复的幻灯片。

html

    <?php
    $job_args = array(
        'taxonomy' => 'job', 
        'name'=>'job', 
        'hide_empty'=>0,
        'depth'=>1,
        'hierarchical'=> 1, 
        'show_count' => 0,
        'show_option_all'=>'תפקיד',
        //'value_field' => 'name',
    );

    $activity_args = array(
        'taxonomy' => 'activity', 
        'name'=>'activity', 
        'hide_empty'=>0,
        'depth'=>1,
        'hierarchical'=> 1, 
        'show_count' => 0,
        'show_option_all'=>'תחום פעילות',
        //'value_field' => 'name',
    );

    $branch_args = array(
        'taxonomy' => 'branch', 
        'name'=>'branch', 
        'hide_empty'=>0,
        'depth'=>1,
        'hierarchical'=> 1, 
        'show_count' => 0,
        'show_option_all'=>'סניף',
        //'value_field' => 'name',
    );


    $job = wp_dropdown_categories( $job_args ); 
    $job = wp_dropdown_categories( $activity_args ); 
    $job = wp_dropdown_categories( $branch_args ); 

    ?>  
    <div class="arrows">
        <div class="next"></div>
        <div class="prev"></div>
    </div>
    <div class="filtered-team team-slider">
        <?php
        $args = [
            'post_type' => 'team',
            'posts_per_page' => -1,
            'orderby' => 'date',
            'order'    => 'ASC'
        ];

        $teampost = new WP_Query($args);


        while($teampost->have_posts()){
            $teampost->the_post(); 

            get_template_part( 'template-parts/content-team' );

        } 
        wp_reset_query() 
        ?>

php

function ajax_team_handler() {
 $job = esc_attr( $_POST['job'] );
 $activity = esc_attr( $_POST['activity'] );
 $branch = esc_attr( $_POST['branch'] );


$args = array(
    'post_type' => 'team',
    'post_status' => 'publish',
    'posts_per_page' => -1,
    'orderby' => 'date',
    'order' => 'DESC',
    'hide_empty'=>0,
    'tax_query' => array(
        'relation'  => 'AND',
        array(
            'taxonomy' => 'job',
            'terms' => $job,
            'field' => 'term_id',
            'include_children' => true,
            'operator' => 'IN'
        ),
        array(
            'taxonomy' => 'activity',
            'terms' => $activity,
            'field' => 'term_id',
            'include_children' => false,
            'operator' => 'IN'
        ),
        array(
            'taxonomy' => 'branch',
            'terms' => $branch,
            'field' => 'term_id',
            'include_children' => false,
            'operator' => 'IN'
        )
    )
);

if ( $job !== 'all' )
$args[]['terms'] = $job;

if ( $job !== 'all' ) {
    $args[][]['terms'] = $job;
} 

if ( $branch !== 'all' ) {
    $args[][][]['terms'] = $branch;
} 


$team = 'No results found.';

$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( 'template-parts/content-team' );

    endwhile;

    $team = ob_get_clean();
endif;

$return = array(
    'team' => $team
);

wp_send_json($return);
}
add_action( 'wp_ajax_team', 'ajax_team_handler' );
add_action( 'wp_ajax_nopriv_team', 'ajax_team_handler' );

初始化光滑

 $('.team-slider').slick({
 rtl:true,
 //slidesToShow: 10,
 slidesToScroll: 1,
 rows: 2,
 slidesPerRow: 3,
 arrows:true,
 prevArrow: $('.prev'),
 nextArrow: $('.next'),
 variableWidth: true,
 infinity:false,
 dots:true,
 responsive: [
     {
      breakpoint: 600,
      settings: {
        slidesToShow: 2,
        slidesToScroll: 1,
        slidesPerRow: 1,
        arrows:false,
      }
    }
  ]
});

ajax

/////////////////////////////////////////////////////
//filtered-team
$(function () {
$('#job, #activity, #branch').change(function () {
    var $job = $('#job').val();
    var $activity = $('#activity').val();
    var $branch = $('#branch').val();

    $('.team-slider').slick('slickRemove');

    $.ajax({
        url: team_ajax_object.ajax_url,
        type: 'POST',
        data: 'action=team&job=' + $job + '&activity=' + $activity + '&branch=' + $branch,
        success: function (data) {
            if (data) {

                $('.team-slider').slick('slickAdd', data.team);

                //console.log(data.team);
            } else {
                $('.filtered-team').html('No results found.');
            }
        }
    });
 });
});

感谢您的帮助

Answer 1

$('.team-slider').slick('slickRemove');

只删除最后一张幻灯片。试试

$('.team-slider').slick('slickRemove', null, null, true);

改为（参见GitHub Issue）。