Question

我为网格中的某些视频帖子设置了wp模板，并使用shufflejs允许用户对类别进行排序。为了保持一致，我还将相同的模板代码应用于category.php模板。

我想要做的是获取currrent类别值，然后将其与网格项的数据过滤器attr匹配。然后要求shufflejs再次过滤项目以仅显示该类别项目中的项目。到目前为止大部分工作都有效 - 但是我无法通过shufflejs来运行动态排序/过滤器。我已经获得了shufflejs lib并在页面上启动了js（即用户可以选择按钮并进行排序）。我只是想发送＆＃39;排序＆＃39;在加载项目之后命令并将它们自动排序。

我的脚本如下：

<div class="wrapper" id="page-wrapper">

    <div class="page-head container-fluid">
        <div class="container">
            <h1><?php echo get_the_title() ?></h1>
        </div>
    </div>

    <div id="content" class="container-fluid">

        <div class="content row">

            <?php $baseCols = 9; ?>

            <?php
            if(is_active_sidebar('sidebar-1')) {
                $side = get_post_meta($post->ID, '_sidebar_position', true);
                if(!$side) $side = 'right';
                if($side == 'left') {
                    get_sidebar();
                    echo '<div id="primary" class="col-md-' . $baseCols . ' content-area">';
                } else if($side == 'right') {
                    echo '<div id="primary" class="col-md-' . $baseCols . ' content-area">';
                }
            } else {
                echo '<div id="primary" class="col-md-' . ($baseCols + 3) . ' content-area">';
            }
            ?>

            <div class="col-md-12 sites-sorting-menu">
                <div id="portfolio-list-filters" class="clearfix text-center">
                    <div id="standard-filter">
                        <ul class="category-filters">
                            <li class='category-filter'><a href='#' class='' data-type='categories'
                                                           data-filter='all'>All</a></li>
                            <?php
                            //Retrieve the current category being viewed
                            $current_cat = get_the_category();
                            // list all the research site post categories as filters
                            $args = array(
                                'type' => 'post',
                                'orderby' => 'name',
                                'order' => 'ASC',
                                'hide_empty' => 1,
                                'taxonomy' => 'category',
                            );
                            $filters = get_categories( $args );
                            foreach ($filters as $filter) {
                                ?>

                                <li class='category-filter'><a href='#' class="" title="<?= $filter->name ?>" data-type='categories' id="<?= $filter->name ?>"
                                                               data-filter='<?= $filter->name ?>'><?= $filter->name ?></a>
                                </li>
                            <?php } ?>
                            <li><input class="form-control js-shuffle-search category-filter" type="search" placeholder="Search..."></li>
                        </ul>
                    </div>
                    <?php
                        $selected_cat = $current_cat[0]->name;
                    ?>
                    <script type="text/javascript">
                        var catPath = "<?php echo $selected_cat ?>";

                        var listItems = jQuery(".category-filters>li>a");
                        listItems.each(function(a) {
                            if (jQuery(this).attr('data-filter') == catPath) {
                                jQuery(this).addClass("active");
                            }
                        });

                    </script>
                </div>
            </div>

        </div>
    </div>

    <div class="container-fluid tiles-container">
        <div id="portfolio-list" class="row">

            <?php $support_args = array(
                'posts_per_page' => -1,
                'type' => 'post',
                'orderby' => 'name',
                'order' => 'ASC',
                'taxonomy' => 'category',
            );
            $support_posts = new WP_Query( $support_args );

            ?>
            <?php while($support_posts->have_posts()) : $support_posts->the_post(); ?>
                <?php $feat_img = quick_resize_to_ratio_and_size(get_post_thumbnail_id( $support_posts->ID ), 1, 1, 640, 480, true);
                $video_cat_arr = get_the_category();

                if (!empty($support_posts) && has_post_format( 'video' )) { ?>
                    <div class="col-xl-2 col-lg-2 col-md-3 col-sm-6 col-xs-12 project-row shuffle-box"
                         data-order="0"
                         data-categories="[<?php foreach($video_cat_arr as $video_cats){echo $video_cats->name.' ';}?>]" data-tags="">
                        <a class="rwp-site" href="<?= the_permalink() ?>">
                            <figure class="project-box" style="height:200px; background-image: url(<?= $feat_img ?>);">
                                <figcaption>
                                    <div class="site-title">
                                        <p style="font-size: 14px"><?= the_title() ?></p>
                                    </div>
                                </figcaption>
                            </figure>
                        </a>
                    </div>
                <?php } ?>

            <?php endwhile; ?>
            <?php wp_reset_postdata(); ?>
        </div>
    </div>

    <script>
        var shuffleInstance = new Shuffle(element, {
        itemSelector: '.shuffle-box',
        });

        shuffleInstance.filter('<?=$selected_cat?>');
    </script>

</div>

我已经阅读了shufflejs的文档，但到目前为止还无法使用自动挂载功能。我做错了什么？

Answer 1

让事情变得复杂...... 为了解决这个问题，我只是使用.trigger（）jQuery命令模拟了一次点击：

<script>
    <?php $selected_cat = $current_cat[0]->name; ?>
    var catPath = "<?php echo $selected_cat ?>";
    window.onload = function() {
        var listItems = jQuery(".category-filters>li>a");
        listItems.each(function(a) {
            if (jQuery(this).attr('data-filter') == catPath) {
                jQuery(this).addClass("active");
                jQuery(this).trigger('click');
            }
        });
    }
</script>

向shufflejs发送动态过滤器命令

1 个答案: