shufflejsへの動的フィルタコマンドの送信

Question

私は、グリッド内のいくつかのビデオ投稿用にwpテンプレートをセットアップし、shufflejsを使用してユーザがカテゴリをソートできるようにしました。一貫性を持たせるため、同じテンプレートコードをcategory.phpテンプレートにも適用しました。

私がやりたいことは、現在のカテゴリの値を取得し、それをグリッド項目のデータフィルタattrと照合することです。次に、シャッフルに再度アイテムをフィルタリングして、そのカテゴリアイテムのアイテムのみを表示するように依頼する。これまでのところほとんどのことが動作していますが、シャッフルに動的なソート/フィルタを実行させることはできません。私はshufflejsのlibを持っているし、すでにページ上でjsを開始している（つまり、ユーザーはボタンを選択することができ、それはソートされる）。私はちょうどアイテムが読み込まれ、それらが自動ソートされた直後に '並べ替え'コマンドを送信したいです。次のように

マイスクリプト：

<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>