Skip to main content
3 / 4
本文に 30 文字追加

プラグイン "select2"で出力したチェックボックスから値を取得して、特定の記事を表示させたい

実現したいこと

以下の参考サイトのように、"Destination => USA"を選択すると、投稿のIDを取得して、同じページ内にある.category__posts .post内のdata属性(data-reisethema, data-destination)とIDに一致する記事を表示させたいです。(全く同じ機能を実装したいです)

https://www.tomontour.de/hotels/#

現在の状況

チェックボックスはpluginの(select2)を使用してチェックボックスを出力しています。
各チェックボックスoptionのvalueには投稿のIDが登録されている
選択したらそのvalueに登録されている投稿IDとdata属性は取得できていますが、その後どうやって取得した情報(記事IDとdata属性)と.category__posts .postにある記事のdata属性とIDに一致する記事を表示させたらいいか、ロジックを組み立てられません。
ご教授よろしくお願いします。

もし説明不足がある場合や不明点などもコメントくださると助かります。

<!------- category.php ドロップダウン -------->
<div class="category__filter" data-destination>
  <div class="category__filter__dropdown">
    <select class="select2" id="select2" multiple>
      <option value=""></option>
      <?php $destinations = get_categories(array(
         'parent' => 15,
         'orderby' => 'name',
         'hide_empty' => 1
       ));
       foreach ($destinations as $dest) : ?>
         <option class="category__filter__dropdown__option" value="<?php echo $dest->term_id; ?>" data-destination="<?php echo $dest->term_id; ?>">
           <?php echo $dest->name; ?> (<?php echo $dest->category_count; ?>)
         </option>
       <?php endforeach; ?>
     </select>
     <input class="select_value" type="text" /><!-- ここで選択したIDの取得を確認できる -->
  </div>
</div>



<!------- category.php 一致した記事を表示させるコード(一部抜粋) -------->
<div class="category__posts">
   <?php while ( have_posts() ) : the_post();
     $stars = get_field('sterne');
     $categories = get_relevant_categories(get_the_ID());
   ?>
   <div id="<?php echo get_post_field( 'post_name', get_the_ID() ); ?>" class="post animated" 
  data-animation="animation-fade-in" 
   data-reisethema="<?php if ($categories['reisethema']) echo $categories['reisethema']->term_id; ?>" 
   data-destination="<?php if ($categories['destination']) echo $categories['destination']->term_id; ?>">
       <div class="post__img">
           <a class="post__content__extra__open"></a>
           <?php the_post_thumbnail('full-hd', array('sizes' => '100vw')); ?>
       </div>
....

<!------- main.js select2(一部抜粋) -------->
$(document).ready(function() {
  $(".select2")
    .select2({
      placeholder: "DESTINATION",
      allowClear: true
    })
    .on("select2:select", function() {
      // 1) Get selected option's IDs
      let selectedID = $(".select_value").val($(this).val());
      console.log(selectedID); // 63,440...

      // 2) var currFilterOption = if category__filter__dropdown__option has attribute "reisethema" -> "reisethema", if not -> "destination" is stored
      var currFilterOption = $(this).attr("data-reisethema")
        ? "reisethema"
        : "destination";
      console.log(currFilterOption); // destination

      // 3) var currFilterValue is to get "2) data-attribute" by data()
      // var currFilterValue = $(this)
      //   .data(currFilterOption)
      //   .toString();
      // alert(currFilterValue); // undefined

      // 4) var filteredPosts -> ".category__posts .post" is filterd by 3)data-reisethema or -destinaton
      var filteredPosts = $(".category__posts .post").filter(function(i, elem) {
        // return $(elem)
        //   .attr("data-" + currFilterOption)
        //   .split(",")
        //   .includes(currFilterValue);
      });
      filteredPosts.fadeIn();
    });

  $("#select2").one("select2:open", function(e) {
    $("input.select2-search__field").prop("placeholder", "SUCHE");
  });
});

画像の説明をここに入力