実現したいこと
無限スクロールで画像と文字を表示させたいです。
発生している問題・分からないこと
68コンテンツを無限スクロールで表示したいのですが60までしか表示されない原因と、何度も同じコンテンツが表示される原因が分かりません。
該当のソースコード
que_list.php
1<?php 2/* 3Template Name: que_list 4固定ページ: 質問一覧画面 5*/ 6get_header(); 7?> 8<div id="feed4-layout"> 9 <div class="image-inline-player"></div> 10 <div class="footer-test"> 11 <p>© All rights reserved by dmmwebcampmedia.</p> 12 </div> 13</div> 14<script> 15 var count = 0; 16 $(function() { 17 add() 18 $(window).on("scroll", function() { 19 if ($(window).scrollTop() + $(window).height() >= $("html").height()) { 20 add() 21 } 22 }) 23 }); 24 25 function add() { 26 const formData = new FormData(); 27 formData.append("action", "bbs_que_list_items"); 28 formData.append("count", count); 29 var url = '/groups/' + group_id + '/messages.json' 30 const opt = { 31 method: "post", 32 body: formData 33 } 34 fetch("<?php echo home_url('wp-admin/admin-ajax.php'); ?>", opt) 35 .then(response => { 36 return response.json(); 37 }) 38 .then(json => { 39 for (let idx = 0; idx < json.items.length; idx++) { 40 count++; 41 const item = json.items[idx]; 42 const imageCardWrap = document.createElement("div"); 43 imageCardWrap.classList.add("image-card-wrap"); 44 imageCardWrap.style.display = "inline-block"; 45 const link = document.createElement("a"); 46 link.href = item.url; 47 const imageThumbnailCard = document.createElement("div"); 48 imageThumbnailCard.classList.add("image-thumbnail-card"); 49 if (item.type == "img") { 50 const img = document.createElement("img"); 51 //img.style.height = "150px"; 52 //img.style.width = "260px"; 53 img.src = item.img1; 54 imageThumbnailCard.appendChild(img); 55 } else if (item.type == "video") { 56 const video = document.createElement("video"); 57 //video.style.height = "150px"; 58 //video.style.width = "260px"; 59 video.src = item.img1 + "#t=0.1"; 60 imageThumbnailCard.appendChild(video); 61 } else if (item.type == "iframe") { 62 const iframe = document.createElement("iframe"); 63 //iframe.style.height = "150px"; 64 //iframe.style.width = "260px"; 65 iframe.src = item.img1; 66 imageThumbnailCard.appendChild(iframe); 67 } else { 68 const img = document.createElement("img"); 69 //img.style.height = "150px"; 70 //img.style.width = "260px"; 71 img.src = "../wp-content/themes/sample_theme/images/alternative.png"; 72 imageThumbnailCard.appendChild(img); 73 } 74 link.appendChild(imageThumbnailCard); 75 const imageTitleLink = document.createElement("div"); 76 imageTitleLink.classList.add("image-title-link"); 77 imageTitleLink.textContent = truncate(item.title, 20); 78 link.appendChild(imageTitleLink); 79 imageCardWrap.appendChild(link); 80 $(".image-inline-player").append(imageCardWrap); 81 } 82 }) 83 .catch(error => { 84 console.log(error); 85 }); 86 }; 87 88 function truncate(str, len) { 89 return str.length <= len ? str : (str.substr(0, len) + "..."); 90 }; 91<script>
functions.php
1//質問掲示板一覧表示 2function bbs_que_list_items() 3{ 4 global $wpdb; 5 $count = $_POST['count']; 6 $sql = 'SELECT * FROM sortable LIMIT %d,10'; 7 $query = $wpdb->prepare($sql, $count); 8 $rows = $wpdb->get_results($query); 9 $result = []; 10 foreach ($rows as $row) { 11 $result['items'][] = ['title' => $row->title, 'img1' => '画像'.$row->ID]; 12 } 13 echo json_encode($result); 14 exit; 15} 16add_action('wp_ajax_bbs_que_list_items', 'bbs_que_list_items'); 17add_action('wp_ajax_nopriv_bbs_que_list_items', 'bbs_que_list_items');
試したこと・調べたこと
- teratailやGoogle等で検索した
- ソースコードを自分なりに変更した
- 知人に聞いた
- その他
上記の詳細・結果
スクロールを発生させるまでのコンテンツ数を広げてみたところ表示されるようになった種類が増えただけでした。
imageTitleLink.textContent = truncate(item.title, 30);
補足
![guest](/img/icon/icnUserSample.jpg)
回答2件
あなたの回答
tips
プレビュー