実現したいこと
以下の参考サイトのように、"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();
});
filteredPosts
の変数に入っているものがそれにあたります。今一度ソースコードを読み込んでもらったほうがいいと思います。