0

実現したいこと

以下の参考サイトのように、"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");
  });
});

画像の説明をここに入力

$(document).ready(function() {
  $(".select2")
    .select2({
      placeholder: "DESTINATION",
      allowClear: true
    })
    .on("select2:select", function() {
      // 1) Get selected option's IDs
      let selectedID = $(this)
        .val()
        .toString();
      alert(selectedID); // array to string 63,440,381

      // Loop in class ".category__posts .post" and get each posts's ID
      const filteredPosts = $(".category__posts .post").filter(function(
        val,
        elem
      ) {
        // let eachPostIDs =
        // return $(elem)
        //   .data("destination")
        //   .toString()
        //   .includes(selectedID); // Get all IDs as string => 25, 381...
        console.log(
          $(elem)
            .data("destination")
            .toString()
            .includes(selectedID)
        );
      });
      filteredPosts.fadeIn();
    });
8
  • ソースコードの3)は何していますか?1)でIDが取れているのであれば、そのIDの記事だけを表示すれば事足りると思いますが?やりたいこととソースが一致していないような気がします。
    – keitaro_so
    2021年8月18日 2:45
  • ソースコード2〜4までは、実は参考サイトの実装したいコードから引っ張ってきたものです。参考サイトを改良してほしいとお願いされたのでデータ一式は持っています。 1)で取得したID(63,440)を .category__posts .post内(編集済みのスクリーンショット)に出力されている記事のID(data-destination=440)と一致させるには表示するには、foreachで.category__posts内の記事一つ一つを取得したIDと一致するか確認すれば良いのでしょうか? 2021年8月18日 6:59
  • 該当の記事のDOMを取得する処理は4)でやっているとおもいます。filteredPostsの変数に入っているものがそれにあたります。今一度ソースコードを読み込んでもらったほうがいいと思います。
    – keitaro_so
    2021年8月18日 7:28
  • コード読んで修正してみます。ありがとうございます。 2021年8月18日 8:06
  • 修正したコードをスクリーンショットの下に貼り付けたのですが、取得したIDを含む.category__posts内の記事がコンソールにはfalse, trueと出力されます。これのtrueだけ(一致する記事)を取得して表示させたいのですが、方法がわかりません。ご教授いただけると幸いです。 2021年8月18日 9:21

0

この質問に回答するには、ログインする必要があります。

のタグが付いた他の質問を参照する。